jp-charge/pagesFinance/statistics/index.vue

<template>
	<view>
		<view class="top-cover">
			<view>
				<view class="navbar-tit" :class="{
				'navbar-tit-box':flag
			}">
					<!--<span class="navbar-tit1">
				 <img  style="height: 40rpx ;width: 40rpx;    margin-right: 4rpx;" src="@/assets/img/titleIcon.svg" alt="">
					51充电联盟
					</span> -->
					<img src="@/assets/img/logo5Ud.png" style="height: 40rpx ;width: 192rpx;" alt="">
					<span class="navbar-tit2">运管中心</span>
				</view>
				<uni-view class="u-navbar-placeholder" style="width: 100%; height: 88rpx;"></uni-view>
			</view>
			<view class="income">
				<!-- 今日收入 -->
				<view class="today-queryHeadTime">{{queryHeadTime}}</view>
				<view class="today-income">
					<view class="number" @click="changesub(1)">
						{{showTopobj.todayAmount}}<text><img src="@/assets/img/riLine-refresh-line.svg" alt=""></text>
					</view>
					<view class="text">
						今日收入 (元)
					</view>
				</view>
				<!-- 其他 -->
				<view class="else">
					<view class="item">
						<view class="item-number">
							{{showTopobj.todayProfit}}
						</view>
						<view class="item-text">
							利润（元）
						</view>
					</view>
					<view class="item">
						<view class="item-number">
							{{showTopobj.todayEQAmount2?showTopobj.todayEQAmount2.toFixed(2):0}}
						</view>
						<view class="item-text">
							今日电量 (度)
						</view>
					</view>
					<view class="item" v-if="showMonthlyCard">
						<view class="item-number">
							{{showTopobj.discountCardBuyNum}} / {{showTopobj.monthCardBuyNum}}
						</view>
						<view class="item-text">
							6折卡/月卡 (张)
						</view>
					</view>
				</view>
			</view>



			<view class="statisticsData">

				<view class="statisticsChart" style="padding-top:20rpx;margin-bottom: 0px">
					<view class="statisticsChart-head ">
						<h4 class="h4-1"><img src="@/assets/img/riFill-numbers-fill.svg" alt="">充电统计</h4>

						<view class="navbar-screen " v-if="info.accountType==1">
							<!-- 个人 -->
							<u-button text="月落" size="mini" class="headbotton1" style="border-radius: 10px 0 0 10px;"
								:type="current==1?'success':'info'" @click="changesub(1)">天报</u-button>

							<u-button text="月落" size="mini" class="headbotton2" style="border-radius: 0 0 0 0;"
								:type="current==2?'success':'info'" @click="changesub(2)">月报</u-button>

							<u-button text="月落" size="mini" class="headbotton3" style="border-radius: 0 10px 10px 0;"
								:type="current==3?'success':'info'" @click="changesub(3)">年报</u-button>

						</view>
						<view class="navbar-screen " v-else>
							<!-- 个人 -->
							<u-button text="月落" size="mini" class="headbotton1" style="border-radius: 10px 0 0 10px;"
								:type="current==1?'success':'info'" @click="changesub(1)">天报</u-button>

							<u-button text="月落" size="mini" class="headbotton3" style="border-radius: 0 10px 10px 0;"
								:type="current==2?'success':'info'" @click="changesub(2)">月报</u-button>

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

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

					</view>
					<view v-if="type_head==3&&indexData3" 
					style="    color: #777777; font-size: 24rpx;" >去年同期数据查询：{{indexData3?indexData3.graphMap.lastSamePeriodTime:''}}</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>

		</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+'-01'"
			:params="params"></u-picker>

		<u-popup border-radius="30" v-model="popupShow3" mode="bottom" height="80%">
			<view class="popup-screen">
				<view class="screen">

					<view class="screen-item">
						<view class="screen-head">站点</view>
						<view class="screen-main">
							<view class="screen-entry  " :class="{
								active:selectstationId==''&&selectstationNo==''
							}" @click="selectstationId='',selectdeviceNo='',selectstationNo='',selectstationNameTemp='全部站点'">全部</view>
							<template v-for="(item,i) in stationList">

								<view class="screen-entry" :class="{
									active:selectstationNo==item.stationNo.substring(0,1)
								}" @click="selectstationId='',selectdeviceNo='',selectstationNo=item.stationNo.substring(0,1)"
									v-if="getStationNo(i)" :key="i">

									{{item.stationNo.substring(0,1)}}类
								</view>

							</template>


							<template v-for="(item,i) in stationList">

								<view class="screen-head" style="width: 100%;"
									v-if="getStationNo(i)&&selectstationNo==item.stationNo.substring(0,1)" :key="i">

									<span style="color: red;">*</span>{{item.stationNo.substring(0,1)}}类
								</view>
								<view :key="i" v-show="selectstationNo==item.stationNo.substring(0,1)" :class="{
									active:selectstationId==item.id
								}" @click="selectstationId=item.id,selectdeviceNo='',selectstationNameTemp=item.name" class="screen-entry">
									{{item.name}}</view>
							</template>


						</view>
					</view>

				</view>
				<view class="screen-foot">
					<view class="screen-btn-l" @click="resetBtn3">重置</view>
					<view class="screen-btn-r" @click="okbtn3">确定</view>
				</view>
			</view>
		</u-popup>

		<u-popup border-radius="30" v-model="popupShow7" mode="bottom" height="80%">
			<h2 style="padding: 40rpx 40rpx 0 40rpx;">充电枪使用情况统计</h2>
			<view class="popup-screen">
				<view class="screen">
					<view class="screen-item" v-if="false">
						<view class="screen-head">显示图表类型</view>
						<view class="screen-main">

							<view class="screen-entry" :class="{
								active:selectShowNumTypeTemp==1
							}" @click="selectShowNumTypeTemp=1">
								百分比
							</view>
							<view class="screen-entry" :class="{
								active:selectShowNumTypeTemp==2
							}" @click="selectShowNumTypeTemp=2">
								次数
							</view>

						</view>
					</view>
					<view class="screen-item" v-if="false">
						<view class="screen-head">充电桩类型<span style="color: red;">*</span><span
								style="color:rgb(136, 136, 136)">（可多选）</span></view>
						<view class="screen-main">

							<view class="screen-entry" :class="{
								active:selectShowNumTypeTemp1==1
							}" @click="selectShowNumTypeTemp1Btn">
								快充桩
							</view>
							<view class="screen-entry" :class="{
								active:selectShowNumTypeTemp2==1
							}" @click="selectShowNumTypeTemp2Btn">
								慢充桩
							</view>

						</view>
					</view>
					<view class="screen-item">
						<view class="screen-head">查询日期</view>
						<view class="screen-main2">

							<u-calendar v-model="showdate" mode="range" @change="changedate7"></u-calendar>
							<view @click="showdate = true" style="
							border: 1px solid;
							padding: 5px;
						">{{startTime3Temp+'至'+endTime3Temp}}</view>


							<!-- 	
							<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
						 -->
						</view>
					</view>


					<view class="screen-item">
						<view class="screen-head">站点类型<span style="color: red;">*</span></view>
						<view class="screen-main">
							<view class="screen-entry  " :class="{
								active:selectstationNo7==''&&selectstationId7==''
							}" @click="selectstationId7='',selectstationNo7='',selectOneTemp={name:'全部站点'}">全部</view>

							<template v-for="(item,i) in stationList">

								<view class="screen-entry" :class="{
									active:selectstationNo7==item.stationNo.substring(0,1)
								}" @click="selectstationId7='',selectstationNo7=item.stationNo.substring(0,1)"
									v-if="getStationNo(i)&&item.stationNo.substring(0,1)!='D'&&item.stationNo.substring(0,1)!='E'"
									:key="i">

									{{item.stationNo.substring(0,1)}}类
								</view>

							</template>


							<template v-for="(item,i) in stationList">

								<view class="screen-head" style="width: 100%;"
									v-if="getStationNo(i)&&selectstationNo7==item.stationNo.substring(0,1)" :key="i">

									{{item.stationNo.substring(0,1)}}类<span style="color: red;">*</span>
								</view>
								<view :key="i" v-show="selectstationNo7==item.stationNo.substring(0,1)" :class="{
									active:selectstationId7==item.id
								}" @click="selectstationId7=item.id,selectOneTemp=item" class="screen-entry">{{item.name}}</view>
							</template>


						</view>



					</view>

					<view class="screen-item" style="margin-bottom: 40rpx;   ">
						<view class="screen-head">时间段查询<span style="color:rgb(136, 136, 136);margin-left: 20rpx;">
								(勾选启用)</span></view>
						<view class="screen-main" style=" align-items: center;">
							<view>
								<checkbox-group @change="checkboxChange1">
									<checkbox value="cb" :checked="sliderNumTemp1.ck"></checkbox>
									{{sliderNumTemp1.ck?'开启':'关闭'}}
								</checkbox-group>
							</view>
							<view style="
																width: 50%;margin-bottom: 8rpx;margin-left: 20rpx;
															">
								<u-select v-model="sliderNum1Show" :default-value="sliderDefaultValue1"
									mode="mutil-column-auto" @confirm="handlerDoubleSlider1"
									:list="sliderNumList"></u-select>
								<view @click="sliderNum1Show = true" style="
															border: 1px solid;
															padding: 5px;
														">{{sliderNumTemp1.minValue+'点至'+(sliderNumTemp1.minValue>sliderNumTemp1.maxValue?'次日':'')+sliderNumTemp1.maxValue+'点'}}
								</view>
							</view>
						</view>
						<view class="screen-main" style=" align-items: center;">
							<view>
								<checkbox-group @change="checkboxChange2">
									<checkbox value="cb" :checked="sliderNumTemp2.ck"></checkbox>
									{{sliderNumTemp2.ck?'开启':'关闭'}}
								</checkbox-group>
							</view>
							<view style="
														width: 50%;margin-bottom: 8rpx;margin-left: 20rpx;
													">
								<u-select v-model="sliderNum2Show" :default-value="sliderDefaultValue2 "
									mode="mutil-column-auto" @confirm="handlerDoubleSlider2"
									:list="sliderNumList"></u-select>
								<view @click="sliderNum2Show = true" style="
															border: 1px solid;
															padding: 5px;
														">{{sliderNumTemp2.minValue+'点至'+(sliderNumTemp2.minValue>sliderNumTemp2.maxValue?'次日':'')+sliderNumTemp2.maxValue+'点'}}
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="screen-foot">
					<view class="screen-btn-l" @click="popupShow7=false">关闭</view>
					<view class="screen-btn-r" @click="okbtn7">确定</view>
				</view>
			</view>
		</u-popup>


		<view class="statisticsChart chargingpile" v-if="indexData4">
			<view class="statisticsChart-head" style="margin-top: 40rpx;">
				<h4>充电枪运行情况</h4>
			</view>
			<view class="details detailstablepile" style="padding: 12px  0 12px 12px ;">
				<p>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20" height="20"
						style=" vertical-align: bottom;border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined"
						filter="none">

						<g>
							<path fill="rgba(23.97,90.015,197.88,1)"
								d="M4 25.333v-20c0-0.736 0.597-1.333 1.333-1.333v0h12c0.736 0 1.333 0.597 1.333 1.333v0 10.667h2.667c1.473 0 2.667 1.194 2.667 2.667v0 5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v0-9.333h-2.667c-0.736 0-1.333-0.597-1.333-1.333v0-4.781l-2.209-2.209 1.885-1.885 6.6 6.6c0.241 0.241 0.391 0.574 0.391 0.941 0 0 0 0.001 0 0.001v-0 12c0 2.209-1.791 4-4 4s-4-1.791-4-4v0-5.333h-2.667v6.667h1.333v2.667h-17.333v-2.667h1.333zM12 14.667v-5.333l-5.333 8h4v5.333l5.333-8h-4z">
							</path>
						</g>
					</svg>
					<!-- 					<img style="    vertical-align: bottom;" src="@/assets/img/riFill-charging-pile-fill.svg"></img>
 --> 快（超）充枪<span>共</span>
					<span
						style="color:#000">{{indexData4.fastGunFaultNum+indexData4.fastGunFreeNum+indexData4.fastGunWorkNum}}</span>
					<span>支</span>
				</p>

				<view class="detailsline">

					<view class="details-row details-row-1" @click="indexDate4Ck(1,1)">

						<view class="span1"><span class="bot bot1"></span>在用<span
								class="bot1span">{{indexData4.fastGunWorkNum}}</span>支
							<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#b0b8c8" size="28" />
						</view>

					</view>
					<view class="details-row details-row-1" @click="indexDate4Ck(1,0)">

						<view class="span1"><span class="bot bot2"></span>空闲<span
								class="bot2span">{{indexData4.fastGunFreeNum}}</span>支
							<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#b0b8c8" size="28" />
						</view>

					</view>
					<view class="details-row details-row-1" @click="indexDate4Ck(1,99)">

						<view class="span1"><span class="bot bot3"></span>故障<span
								class="bot3span">{{indexData4.fastGunFaultNum}}</span>支
							<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#b0b8c8" size="28" />
						</view>

					</view>
				</view>

				<p style="margin-top: 16rpx;color:#00B962">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20" height="20"
						style=" vertical-align: bottom;border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined"
						filter="none">

						<g>
							<path fill="#00B962"
								d="M4 25.333v-20c0-0.736 0.597-1.333 1.333-1.333v0h12c0.736 0 1.333 0.597 1.333 1.333v0 10.667h2.667c1.473 0 2.667 1.194 2.667 2.667v0 5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v0-9.333h-2.667c-0.736 0-1.333-0.597-1.333-1.333v0-4.781l-2.209-2.209 1.885-1.885 6.6 6.6c0.241 0.241 0.391 0.574 0.391 0.941 0 0 0 0.001 0 0.001v-0 12c0 2.209-1.791 4-4 4s-4-1.791-4-4v0-5.333h-2.667v6.667h1.333v2.667h-17.333v-2.667h1.333zM12 14.667v-5.333l-5.333 8h4v5.333l5.333-8h-4z">
							</path>
						</g>
					</svg>

					慢充枪<span>共</span>
					<span
						style="color:#000">{{indexData4.slowGunFaultNum+indexData4.slowGunFreeNum+indexData4.slowGunWorkNum}}</span>
					<span>支</span>
				</p>
				<view class="detailsline—bottom">

					<view class="details-row details-row-1" @click="indexDate4Ck(2,1)">

						<view class="span1"><span class="bot bot1"></span>在用<span
								class="bot1span">{{indexData4.slowGunWorkNum}}</span>支
							<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#b0b8c8" size="28" />
						</view>

					</view>
					<view class="details-row details-row-1" @click="indexDate4Ck(2,0)">

						<view class="span1"><span class="bot bot2"></span>空闲<span
								class="bot2span">{{indexData4.slowGunFreeNum}}</span>支
							<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#b0b8c8" size="28" />
						</view>

					</view>
					<view class="details-row details-row-1" @click="indexDate4Ck(2,99)">

						<view class="span1"><span class="bot bot3"></span>故障<span
								class="bot3span">{{indexData4.slowGunFaultNum}}</span>支
							<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#b0b8c8" size="28" />
						</view>

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

		<view class="statisticsChart chargingpile" v-if="indexData4">
			<view class="statisticsChart-head" style="margin-top: 20rpx;">
				<h4>电单车充电桩运行情况</h4>
			</view>
			<view class="details detailstablepile" style="padding: 12px  0 12px 12px ;">
				<p style="color:#1677FF">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20" height="20"
						style=" vertical-align: bottom;border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined"
						filter="none">

						<g>
							<path fill="#1677FF"
								d="M4 25.333v-20c0-0.736 0.597-1.333 1.333-1.333v0h12c0.736 0 1.333 0.597 1.333 1.333v0 10.667h2.667c1.473 0 2.667 1.194 2.667 2.667v0 5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v0-9.333h-2.667c-0.736 0-1.333-0.597-1.333-1.333v0-4.781l-2.209-2.209 1.885-1.885 6.6 6.6c0.241 0.241 0.391 0.574 0.391 0.941 0 0 0 0.001 0 0.001v-0 12c0 2.209-1.791 4-4 4s-4-1.791-4-4v0-5.333h-2.667v6.667h1.333v2.667h-17.333v-2.667h1.333zM12 14.667v-5.333l-5.333 8h4v5.333l5.333-8h-4z">
							</path>
						</g>
					</svg>
					电单车充电桩<span>共</span>
					<span style="color:#000">{{indexData4.singleCarOnlineNum+indexData4.singleCarNotOnlineNum}}</span>
					<span>台</span>
				</p>

				<view class="detailsline">

					<view class="details-row details-row-1" @click="indexDate5Ck(1,1)">

						<view class="span1"><span class="bot bot1"></span>正常<span
								class="bot1span">{{indexData4.singleCarOnlineNum}}</span>台
							<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#b0b8c8" size="28" />
						</view>

					</view>

					<view class="details-row details-row-1" @click="indexDate5Ck(0,99)">

						<view class="span1"><span class="bot bot3"></span>故障<span
								class="bot3span">{{indexData4.singleCarNotOnlineNum}}</span>台
							<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#b0b8c8" size="28" />
						</view>

					</view>
				</view>

			</view>
		</view>

		<u-popup v-model="popupShow6" mode="bottom" border-radius="30">

			<view class="indexData5content">
				<view class="contentTitle">
					电单车充电桩{{indexData5Obj.type?'正常':'故障'}}明细
				</view>
				<scroll-view scroll-y="true" style="height: 520rpx;">

					<u-collapse style="padding-bottom: 30rpx;">
						<u-collapse-item v-for="(item,index) in indexData5List" class="contentItem"
							v-show="item.deviceNum" :key="index">
							<svg slot="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20"
								height="20"
								style=" vertical-align: bottom;border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined"
								filter="none">
								<g>
									<path fill="#1677FF"
										d="M4 25.333v-20c0-0.736 0.597-1.333 1.333-1.333v0h12c0.736 0 1.333 0.597 1.333 1.333v0 10.667h2.667c1.473 0 2.667 1.194 2.667 2.667v0 5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v0-9.333h-2.667c-0.736 0-1.333-0.597-1.333-1.333v0-4.781l-2.209-2.209 1.885-1.885 6.6 6.6c0.241 0.241 0.391 0.574 0.391 0.941 0 0 0 0.001 0 0.001v-0 12c0 2.209-1.791 4-4 4s-4-1.791-4-4v0-5.333h-2.667v6.667h1.333v2.667h-17.333v-2.667h1.333zM12 14.667v-5.333l-5.333 8h4v5.333l5.333-8h-4z">
									</path>
								</g>
							</svg>
							<view slot="title" class="span1">

								{{item.stationName}}

							</view>
							<view slot="title">

								<span class="span2 color777">
									共<span class="color333">{{item.deviceNum}}</span>台
								</span>
								<span class="span3 color777">
									通道数<span class="color333">{{item.channelNum}}</span>
								</span>
							</view>
							<view style="padding-bottom: 30rpx;">
								<view class="contentBodyName">

									{{item.stationName}}

								</view>
								<view class="contentBody" v-for="(gun,i) in item.device" :key="i">

									<view class="body1">{{gun.deviceName}}</view>
									<view class="body2" v-if="indexData5Obj.type">
										<view class="body2-0">在用<span class="body2-1">{{gun.useNum}}</span> </view>
										<view class="body2-2">| 空闲 {{gun.freeNum}}</view>
									</view>
									<view class="body3" v-else>故障</view>

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

				</scroll-view>
				<view class="confrim-btn">
					<u-button shape="square" type="primary" @click="popupShow6 = false;">关闭</u-button>
				</view>
			</view>

		</u-popup>
		<u-popup v-model="popupShow5" mode="bottom" border-radius="30">

			<view class="indexData4content">
				<view class="contentTitle">
					{{indexData4Obj.typeName}}枪{{indexData4Obj.text}}明细
					<!-- <view v-show='indexData4Obj.value=="bot3span"' style="color:#777777;font-size: 12px;font-weight: normal;">
						点击站点查看故障枪
					</view> -->
				</view>
				<scroll-view scroll-y="true" style="height: 520rpx;">
					<u-collapse class="u-collapse-bot3span"
						v-if='indexData4Obj.value=="bot3span"||indexData4Obj.value=="bot1span"'
						style="padding-bottom: 30rpx;">
						<u-collapse-item class="contentItem" v-for="(item,index) in indexData4List"
							v-show="item.queryNum" :key="index">


							<span class="span1" slot="title">
								<img v-show="indexData4Obj.type==1&&item.category!='超充'"
									src="@/assets/img/riFill-charging-pile-fill.svg">
								<img v-show="indexData4Obj.type==1&&item.category=='超充'"
									src="@/assets/img/riFill-charging-pile-fill3.svg">
								<img v-show="indexData4Obj.type==2" src="@/assets/img/riFill-charging-pile-fill2.svg">
								</img>
								{{item.stationName}}</span>
							<span class="span2 color777" slot="title">
								共<span class="color333">{{item.gunNum}}</span>支
							</span>
							<span class="span3 color333" slot="title">
								{{indexData4Obj.text}}<span class="color777"
									:class="indexData4Obj.value">{{item.queryNum}}</span>支
							</span>

							<view style="padding-bottom: 30rpx;">
								<view class="contentBodyName">

									{{item.stationName}}

								</view>
								<view class="contentBody" v-for="(gun,i) in item.gunList" :key="i">

									<view class="body1">
										<span
											v-if="gun.sortNo">{{gun.sortNo}}号<text>/</text></span>{{gun.deviceName}}{{'枪'+gun.channelNo}}
									</view>

									<view class="body3" v-if='indexData4Obj.value=="bot1span"'>
										{{gun.soc?gun.soc+'%':'充电中'}}
									</view>
									<view class="body3" v-if='indexData4Obj.value=="bot3span"'>{{gun.workStatusText}}
									</view>

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

					</u-collapse>
					<view class="u-collapse-bot0span" style="padding-bottom: 30rpx;" v-else>
						<view class="contentItem" v-for="(item,index) in indexData4List" v-show="item.queryNum"
							:key="index">


							<span class="span1">
								<img v-show="indexData4Obj.type==1&&item.category!='超充'"
									src="@/assets/img/riFill-charging-pile-fill.svg">
								<img v-show="indexData4Obj.type==1&&item.category=='超充'"
									src="@/assets/img/riFill-charging-pile-fill3.svg">
								<img v-show="indexData4Obj.type==2" src="@/assets/img/riFill-charging-pile-fill2.svg">
								</img>
								{{item.stationName}}</span>
							<span class="span2 color777">
								共<span class="color333">{{item.gunNum}}</span>支
							</span>
							<span class="span3 color333">
								{{indexData4Obj.text}}<span class="color777"
									:class="indexData4Obj.value">{{item.queryNum}}</span>支
							</span>
						</view>
					</view>
				</scroll-view>
				<view class="confrim-btn">
					<u-button shape="square" type="primary" @click="popupShow5 = false;">关闭</u-button>
				</view>
			</view>

		</u-popup>
		<view class="statisticsChart">


			<view class="statisticsChart-head" style="margin-top: 40rpx;">
				<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>
				<view v-if="stationFlowList.length==0"
					style="color: rgba(153, 153, 153, 1);font-size: 28rpx;text-align: center;margin-top: 16rpx;">
					站点列表为空
				</view>
				<view v-if="stationFlowList.length" @click="gotoUrl('pagesFinance/statistics/list')"
					style="color: rgba(153, 153, 153, 1);font-size: 28rpx;text-align: center;margin-top: 16rpx;">
					查看站点流水统计 <u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#b0b8c8" size="28">
					</u-icon>
				</view>





			</view>

			<view class="statisticsChart-head" style="margin-top: 40rpx;">
				<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.chargingAmount).toFixed(2)}}元</span>
				</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 class="statisticsChart-head" style="margin-top: 40rpx;">
				<h4>充电枪使用情况统计</h4>
				<!-- <view class="navbar-screen" >
					 {{startTime}}至{{endTime}}
				 </view> -->
				<view class="navbar-screen" @click="resetBtn7()"><span>筛选</span>
					<u-icon name="filter-2-fill" custom-prefix="custom-icon" color="#b0b8c8" size="32"></u-icon>
				</view>


			</view>

			<view style="
				color: #888888;
			">
				<view v-if="selectOne"><!-- [ {{selectShowNumType==1?'百分比':'次数'}} ] --> {{selectOne.name}}</view>
				<view>{{startTime3}}至{{endTime3}};</view>
				<view>
					<span
						v-if="sliderNum1.ck">{{sliderNum1.minValue}}点-{{(sliderNumTemp1.minValue>sliderNumTemp1.maxValue?'次日':'')}}{{sliderNum1.maxValue}}点;</span>
					<span
						v-if="sliderNum2.ck">{{sliderNum2.minValue}}点-{{(sliderNumTemp2.minValue>sliderNumTemp2.maxValue?'次日':'')}}{{sliderNum2.maxValue}}点;</span>
				</view>

			</view>
			<view class="detailstableHead" style="
						padding-top: 1px;
					">
				<view id="pieEcharts2" style="margin-top: 40rpx">

				</view>
			</view>
		</view>
		<u-divider nonetext="没有找到相关内容" style="margin-top: 20rpx;" border-color="#CFD2D5">已经到底了</u-divider>


		<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";
	import DoubleSlider from '@/components/double-slider/DoubleSlider.vue';
	//require("@/apis/echarts-5-3.min.js")
	//import * as echarts from "@/apis/echarts-5-3.min.js";
	import {
		daysDistance,
		beforeTimeStamp,
		currentTimeStamp,
		parseUnixTime,
		newDate
	} from '@/utils'
	export default {

		data() {
			return {
				popupShow3: false,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				indexData4List: [],
				indexData4Obj: {},
				indexData5List: [],
				indexData5Obj: {},
				headitemby: "",
				isinit: true,
				form: {},
				form2: {},
				form3: {},
				selecttype: "",
				selectstationId: "",
				selectdeviceNo: "",
				selectstationNo: "",

				selectstationId7: "",

				selectstationNo7: "",

				popupShow2: false,
				popupShow: false,
				popupShow4: false,
				popupShow5: false,
				popupShow6: false,
				popupShow7: false,
				nowTime: 0,
				queryHeadTime: "",
				selectstationId2: "",
				selectstationIndex: 0,
				selectstationName: "",
				selectstationNameTemp: "",
				info: {},
				title: "",
				showdate: false,
				showdate2: false,

				queryTime: "",
				queryTime2: "",

				indexData: {},
				indexData3: null,
				indexData2: null,
				indexData4: null,
				indexData5: null,
				indexData6: null,
				type_head: '1',
				startDate_head: '',
				changeitemBl: false,
				myChart2: null,
				myChart: null,
				myChartReady: true,
				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: '',
				endTime3: '',
				endTime3Temp: '',
				stationId3: "",
				current: 1,
				background: {
					background: 'none'
				},
				value: '',
				type: 'select',
				show: false,
				border: true,
				step: 0,
				stepname: '',
				startTime: '',
				startTime3: '',
				startTime3Temp: '',
				stepid: 0,
				windowWidth: 0,
				windowHeight: 300,
				showTopobj: {},
				showMonthlyCard: false,
				flag: false,
				//selectstationId: "",
				selectOne: {
					name: '全部站点'
				},
				selectOneTemp: {},
				selectShowNumType: 1,
				selectShowNumTypeTemp: 1,

				selectShowNumType1: 1,
				selectShowNumTypeTemp1: 1,
				selectShowNumType2: 1,
				selectShowNumTypeTemp2: 1,
				sliderNum1: {
					ck: 0,
					minValue: 0,
					maxValue: 8
				},
				sliderNum2: {
					ck: 0,
					minValue: 18,
					maxValue: 24
				},

				sliderNumTemp1: {
					ck: 0,
					minValue: 0,
					maxValue: 5
				},
				sliderNumTemp2: {
					ck: 0,
					minValue: 0,
					maxValue: 5
				},
				sliderNum1Show: false,
				sliderNum2Show: false,
				sliderNumList: [


				],
			}
		},
		onShow() {
			if (this.$refs.tabbarMain) {
				this.$refs.tabbarMain.setcount(0);
			}
			API.homeChargingGunStatus().then((res) => {

				this.indexData4 = res.data;

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

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


			this.info = this.carhelp.getPersonInfo()
			this.info = this.carhelp.getPersonInfo()
			if (this.info && this.info.showMonthlyCard) {
				this.showMonthlyCard = this.info.showMonthlyCard;

			}
			this.title = this.info.merchantAccountName
			uni.getSystemInfo().then(e => {
				this.windowWidth = e[1].windowWidth
				this.windowHeight = e[1].windowHeight
			})
			this.sliderNumList = []
			var sz = []
			for (var i = 0; i < 24; i++) {
				var sz2 = []

				// for(var j =i+1;j<=24;j++){
				// 	sz2.push({
				// 		value: j,
				// 		label: j+'点'
				// 	})
				// }


				for (var j = i + 1; j < i + 24; j++) {

					if (j <= 24) {
						sz2.push({
							value: j,
							label: j + '点'
						})
					} else {
						sz2.push({
							value: j - 24,
							label: '次日' + (j - 24) + '点'
						})
					}

				}

				sz.push({
					value: i,
					label: i + '点',
					children: sz2
				})
			}

			this.sliderNumList = sz
		},
		components: {
			Tabbar,
			DoubleSlider

		},

		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(6), '{y}-{m}-{d}')
			this.endTime = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}')
			//this.startTime2 = parseUnixTime(beforeTimeStamp(6), '{y}-{m}-{d}')
			this.endTime2 = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')


			this.startTime3 = parseUnixTime(beforeTimeStamp(31), '{y}-{m}-{d}')
			this.endTime3 = parseUnixTime(beforeTimeStamp(1), '{y}-{m}-{d}')


			this.getStation()
		},
		computed: {

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

			sliderDefaultValue1() {
				var min = this.sliderNumTemp1.minValue
				var max = this.sliderNumTemp1.maxValue
				var a = min
				var b = 0
				if (max > min) {

					b = max - min - 1

				} else {
					b = 23 - min + max

				}
				return [a, b]
			},
			sliderDefaultValue2() {
				var min = this.sliderNumTemp2.minValue
				var max = this.sliderNumTemp2.maxValue
				var a = min
				var b = 0
				if (max > min) {

					b = max - min - 1

				} else {
					b = 23 - min + max
				}
				return [a, b]
			},
			startTime2() {
				return this.queryTime2 + '-01'
			},

		},
		onPageScroll(e) {

			this.onPageScrollMethod()

		},
		updated() {
			this.onPageScrollMethod()
		},

		methods: {
			checkboxChange1(e) {
				this.sliderNumTemp1.ck = e.detail.value.length
			},
			checkboxChange2(e) {
				this.sliderNumTemp2.ck = e.detail.value.length
			},
			handlerDoubleSlider1(e) {

				// var a=e.minValue.toFixed(0)
				// var b=e.maxValue.toFixed(0)


				this.sliderNumTemp1.minValue = e[0].value
				this.sliderNumTemp1.maxValue = e[1].value
			},
			handlerDoubleSlider2(e) {
				// 	var a=e.minValue.toFixed(0)
				// 	var b=e.maxValue.toFixed(0)


				// 	this.sliderNumTemp2.minValue=a
				// 	this.sliderNumTemp2.maxValue=b
				this.sliderNumTemp2.minValue = e[0].value
				this.sliderNumTemp2.maxValue = e[1].value

				//this.preference.obc_power = e;
				//this.preference.obc_power.minValue = e.minValue;
				//this.preference.obc_power.maxValue = e.maxValue;
			},
			selectShowNumTypeTemp1Btn() {
				if (this.selectShowNumTypeTemp1 == 1) {
					this.selectShowNumTypeTemp1 = 0
				} else {
					this.selectShowNumTypeTemp1 = 1
				}
			},
			selectShowNumTypeTemp2Btn() {
				if (this.selectShowNumTypeTemp2 == 1) {
					this.selectShowNumTypeTemp2 = 0
				} else {
					this.selectShowNumTypeTemp2 = 1
				}
			},
			getStationNo(i) {
				var no = this.stationList[i].stationNo
				if (no) {
					if (i == 0) {
						return true
					} else {
						var no2 = this.stationList[i - 1].stationNo

						if (no2) {
							return no2.substring(0, 1) != no.substring(0, 1)
						} else {
							return false
						}

					}
				} else {
					return false
				}

			},
			onPageScrollMethod() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.income').boundingClientRect(data => {

					if (data) {
						var c = uni.upx2px(32);

						if (data.top > c) {
							this.flag = false;
						} else {
							this.flag = true;
						}
					}

				}).exec();
			},

			indexDate5Ck(t, status) {

				//单车充电

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

					this.indexData4 = res.data;

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

						title: error
					})
				})
				this.indexData5Obj.type = t

				API.homeChargingSingleCarStatusDetail({

					status: status
				}).then((res) => {

					this.popupShow6 = true;

					this.indexData5List = res.data.stationList;

					for (var i in this.indexData5List) {
						var item = this.indexData5List[i];
						if (item.deviceNum) {
							this.popupShow6 = true
							break
						}
						this.popupShow6 = false;
					}
					if (!this.popupShow6) {
						uni.showToast({
							title: "电单车充电桩" + (t ? "正常" : "故障") + "0支"
						})
					}
				}).catch(error => {
					uni.showToast({

						title: error
					})
				})

			},

			indexDate4Ck(c, t) {
				//汽车充电
				API.homeChargingGunStatus().then((res) => {

					this.indexData4 = res.data;

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

						title: error
					})
				})

				this.indexData4Obj.type = c
				if (c == 1) {
					this.indexData4Obj.typeName = "快（超）充"
				}
				if (c == 2) {
					this.indexData4Obj.typeName = "慢充"
				}
				if (t == 1) {
					this.indexData4Obj.text = "在用"
					this.indexData4Obj.value = "bot1span"
				}
				if (t == 0) {
					this.indexData4Obj.text = "空闲"
					this.indexData4Obj.value = "bot2span"
				}
				if (t == 99) {
					this.indexData4Obj.text = "故障"
					this.indexData4Obj.value = "bot3span"
				}
				API.homeChargingGunStatusDetail({
					type: c,
					status: t
				}).then((res) => {

					this.indexData4List = res.data.stationList;

					for (var i in this.indexData4List) {
						var item = this.indexData4List[i];
						if (item.queryNum) {
							this.popupShow5 = true
							break
						}
						this.popupShow5 = false;
					}
					if (!this.popupShow5) {
						uni.showToast({
							title: this.indexData4Obj.typeName + "枪" + this.indexData4Obj.text + "0支"
						})
					}
				}).catch(error => {
					uni.showToast({

						title: error
					})
				})

			},
			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) => {

					var list = res.data.stationList

					var list2 = list.sort(function(item1, item2) {


						return (item1.stationNo > item2.stationNo) ? 1 : -1
					})

					this.stationList = list2
					if (list2.length) {
						this.getData()
					}
					//
					this.getData3()
					// this.stationList.unshift({
					// 	id: '',
					// 	name: "全部站点"
					// })
					this.selectstationName = "全部站点"

					//this.stationListSon = res.data.deviceList
					this.getDataHome2()

					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;
					uni.hideLoading()

					if (this.type_head == 3) {
						this.getBar(this.info.accountType)
					} else {
						if (this.type_head == 1) {
							var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");

							var day = new Date().getDay();
							var week = weeks[day];
							var sz = new Date().toLocaleString().split(" ");
							this.queryHeadTime = sz[0] + " " + week + " " + sz[1]
						}
						this.getPie(this.info.accountType)
					}


				}).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;

					this.serviceMoneySum = res.data.allProfit;
					this.allMoneySum = res.data.allAmount;

					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
					})
				})
			},
			changedate7(e) {
				//	this.queryDate = e.result

				this.startTime3Temp = e.startDate
				this.endTime3Temp = e.endDate

			},
			getData3(bl) {
				this.indexData6 = null
				if (bl) {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					this.myChartReady = false
				}


				this.form3.startDate = this.startTime3
				this.form3.endDate = this.endTime3

				this.form3.stationId = this.stationId3;
				//var str="";
				if (this.sliderNum1.ck == 1 || this.sliderNum2.ck == 1) {
					var str = "";
					if (this.sliderNum1.ck == 1) {
						str += this.sliderNum1.minValue + "-" + this.sliderNum1.maxValue
						if (this.sliderNum2.ck == 1) {
							str += ","
						}
					}
					if (this.sliderNum2.ck == 1) {
						str += this.sliderNum2.minValue + "-" + this.sliderNum2.maxValue

					}
					this.form3.timeArray = str
				} else {
					delete this.form3.timeArray
				}

				API.usageStatistics(this.form3).then((res) => {
					this.indexData6 = res.data
					if (bl) {
						this.myChartReady = true
						uni.hideLoading()
					}

					this.getPie2(this.indexData6)


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

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

				this.current = e
				this.type_head = e;
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (e == 1) {
					this.startDate_head = parseUnixTime(beforeTimeStamp(30), '{y}-{m}-{d}')
				} else if (e == 2) {
					this.startDate_head = parseUnixTime(beforeTimeStamp(365), '{y}-{m}-01')
				} else if (e == 3) {
					this.startDate_head = parseUnixTime(new Date(), '{y}-01-01')
				}
				//	this.getPie()
				this.getDataHome2()
			},
			changedate4(e) {
				this.startTime = e.startDate
				this.endTime = e.endDate
				this.okbtn()

			},
			resetBtn7() {
				//this.myChart2.dispatchAction({ type: 'hideTip' });

				this.popupShow7 = true;

				this.startTime3Temp = this.startTime3;
				this.endTime3Temp = this.endTime3;
				this.selectShowNumTypeTemp = this.selectShowNumType;
				this.sliderNumTemp1 = this.sliderNum1
				this.sliderNumTemp2 = this.sliderNum2
				this.selectShowNumTypeTemp2 = this.selectShowNumType2
				this.selectShowNumTypeTemp1 = this.selectShowNumType1
				this.selectOneTemp = this.selectOne;

			},
			okbtn7() {
				// if(this.selectstationId7==''){
				// 	uni.showToast({
				// 		icon:"none",
				// 		title:"请选择站点"
				// 	})
				// 	return
				// }
				if (this.selectShowNumTypeTemp2 == 0 && this.selectShowNumTypeTemp1 == 0) {
					uni.showToast({
						icon: "none",
						title: "充电桩类型至少选择一个"
					})
					return
				}
				this.selectShowNumType2 = this.selectShowNumTypeTemp2
				this.selectShowNumType1 = this.selectShowNumTypeTemp1


				this.sliderNum1 = this.sliderNumTemp1
				this.sliderNum2 = this.sliderNumTemp2

				this.selectShowNumType = this.selectShowNumTypeTemp
				this.selectOne = this.selectOneTemp;
				this.stationId3 = this.selectstationId7
				this.startTime3 = this.startTime3Temp
				this.endTime3 = this.endTime3Temp
				this.popupShow7 = false
				this.getData3(true);
			},
			resetBtn3() {
				this.selectstationId = ""
				this.selectstationId2 = "";
				this.selectstationNo = ""
				//this.selectstationIndex = index;
				this.selectstationNameTemp = "全部站点"
				this.selectstationName = "全部站点";
				//this.okbtn2()
				this.popupShow3 = false
				this.okbtn2()

			},
			okbtn3() {
				if (this.selectstationNo && this.selectstationId == '') {
					uni.showToast({
						icon: "none",
						title: "请选择站点"
					})
					return
				}
				this.popupShow3 = false

				this.selectstationId2 = this.selectstationId;
				//this.selectstationIndex = index;
				this.selectstationName = this.selectstationNameTemp;
				//this.okbtn2()

				this.okbtn2()
			},
			changedate3(e) {


				this.selectstationId2 = this.selectstationId;
				//this.selectstationIndex = index;
				this.selectstationName = this.selectstationNameTemp;
				this.okbtn2()
			},
			changedate(e) {


				this.queryTime = e.year + '-' + e.month;
				this.startTime = e.year + '-' + e.month + '-01';

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

			},
			getPie2(obj, str) {

				var data = []
				//var dataAll=[]
				var data1 = []
				var data2 = []

				var usageFastMap = obj.usageFastMap;
				for (var i in usageFastMap) {
					// var str1=parseInt( i.split('-')[0])
					// var str2=parseInt(i.split('-')[1])

					// //dataAll.push(i)
					// if(this.sliderNum1.ck==1||this.sliderNum2.ck==1){
					// 	// str+=this.sliderNum1.minValue+"-"+this.sliderNum1.maxValue
					// 	// if(this.sliderNum2.ck==1){
					// 	// 	str+=","
					// 	// }
					// 	if(this.sliderNum2.ck==1){
					// 		//str+=this.sliderNum2.minValue+"-"+this.sliderNum2.maxValue
					// 		if(this.sliderNum2.minValue<=str1&&this.sliderNum2.maxValue>str1){
					// 			data.push(i)
					// 			continue
					// 		}

					// 	}
					// 	 if(this.sliderNum1.ck==1){
					// 		//str+=this.sliderNum2.minValue+"-"+this.sliderNum2.maxValue
					// 		if(this.sliderNum1.minValue<=str1&&this.sliderNum1.maxValue>str1){
					// 			data.push(i)
					// 			continue
					// 		}
					// 	}
					// }else{

					// }

					data.push(i)


				}
				var height = 1680;


				if (!this.myChart2) {
					this.myChart2 = echarts.init(document.getElementById('pieEcharts2'), null, {
						width: uni.upx2px(700),
						height: uni.upx2px(height)
					});
				} else {
					if (data.length != 24) {
						height = 1680 * data.length / 24 + 200
						if (data.length <= 10) {
							//top='12%'
						}
						//top=(30-data.length*2)+'%'
					}
					this.myChart2.resize({
						height: uni.upx2px(height),
						width: uni.upx2px(700)
					})

				}
				this.myChart2.clear();


				var usageSlowMap = obj.usageSlowMap;

				data.reverse()
				var num1 = 0;
				var num2 = 0;
				for (var i in data) {

					num1 += usageFastMap[data[i]]
					num2 += usageSlowMap[data[i]]

				}

				for (var i in data) {
					if (this.selectShowNumType == 1) {
						if (num1 == 0) {
							data1.push(0)
						} else {
							data1.push((usageFastMap[data[i]] / num1 * 100).toFixed(2))

						}
						if (num2 == 0) {
							data2.push(0)
						} else {
							data2.push((usageSlowMap[data[i]] / num2 * 100).toFixed(2))

						}

					} else {
						data1.push((usageFastMap[data[i]]))
						data2.push((usageSlowMap[data[i]]))

					}

				}

				var series = []
				if (this.selectShowNumType1 == 1) {
					series.push({
						name: '快充桩',
						type: 'bar',
						data: data1,
						barWidth: 10,
						label: {
							show: true, // 开启数据标签显示  
							position: 'right', // 数据标签位置，这里设置为顶部  
							color: 'black', // 数据标签颜色  
							fontSize: uni.upx2px(24), // 数据标签字体大小  
							formatter: '{c}' + (this.selectShowNumType == 1 ? '%' : '次')
						}
					})
				}
				if (this.selectShowNumType2 == 1) {
					series.push({
						name: '慢充桩',
						type: 'bar',
						data: data2,
						barWidth: 10,
						label: {
							show: true, // 开启数据标签显示  
							position: 'right', // 数据标签位置，这里设置为顶部  
							color: 'black', // 数据标签颜色  
							fontSize: uni.upx2px(24), // 数据标签字体大小 
							formatter: '{c}' + (this.selectShowNumType == 1 ? '%' : '次')
						}
					})
				}
				var option = {

					tooltip: {
						// formatter: '{b}点<br />{a0}: {c0}%<br />{a1}: {c1}%',
						formatter: (value) => {
							var name = value[0].axisValueLabel;

							var text1 = ""
							var style = "float: right;margin-left: 3px;"
							for (var i in value) {

								text1 += "<p>" + value[i].marker + value[i].seriesName +
									'<span style="' + style +
									'">' + value[i].data + (this.selectShowNumType == 1 ? '%' : '次') +
									'</span></p>';
							}
							return `<p>${name}时</p>` + text1
						},
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {},
					grid: {
						top: 30,
						left: 2,
						right: 30,
						bottom: 20,
						containLabel: true
					},
					xAxis: {
						name: this.selectShowNumType == 1 ? '%' : '次',
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					yAxis: {

						type: 'category',
						data: data,
						axisLabel: {

							interval: 0,

						},
					},
					series: series
				}

				this.myChart2.setOption(option);
				console.log(option)
			},
			getBar(type) {
				var getData = this.indexData3.graphMap;

				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('pieEcharts'));
					this.myChart.on("dataZoom", (res) => {
						showkey = "";
						this.headitemby = "";
					});
				}
				this.myChart.clear();
				var key = ["AmountCard", "ProfitCard", "EQAmount", "DiscountCardBuyNum", "MonthCardBuyNum"]
				var keyStr = ['收入\n(含卡)', '利润\n(含卡)', '充电量', '6折卡', '月卡']
				var keyStrN = ['收入（含卡）', '利润（含卡）', '充电量', '6折卡', '月卡']
				var keyStrT = ['收入', '利润', '充电量', '6折卡', '月卡']
				
				var sz1 = []
				var sz2 = []
				key.forEach(item => {
					var i1 = getData['nowYear' + item]
					var i2 = getData['lastSamePeriod' + item]
					if (i1 + i2 == 0) {
						sz1.push(0)
						sz2.push(0)
					}else if (i1 &&i2 == 0) {
						sz1.push(100)
						sz2.push(0)
					}  else {
						sz1.push((i1 / (i2) * 100.00).toFixed(2))
						if (i1 < i2) {
							sz2.push(((i2 - i1) / (i2) * 100.00).toFixed(2))
						} else {
							sz2.push(0)
						}

					}

				})
				var option = {

					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						position: (e) => {
							var x = e[0]
							var y = e[1]
							
							if (this.windowWidth) {
								
									if (x < this.windowWidth / 2) {
										return ['30%', '-20%']
									} else {
										return ['10%', '-20%']
									}
								
							
							
							}
						},
						formatter: (value) => {
							//console.log(value)
							var dataIndex = value[0].dataIndex;
							var name =keyStrN[dataIndex];
							var style = "float: right;margin-left: 20px;"
							var prefix = ["lastYear", "lastSamePeriod", "nowYear"]
							var prefixStr = ["去年全年", "去年同期", "今年同期"]
							var u = ['元', '元', '度', '张', '张']
							var keytool = ["AmountCard", "ProfitCard", "EQAmount", "DiscountCardBuyNum",
								"MonthCardBuyNum"
							]
							var text1 = ""
							//去年全年数据、去年同期数据、今年当前数据和同期完成比。
							var k = null;
							for (var j in prefix) {
								var pre = prefix[j]


								var item = keytool[dataIndex]
								var num = getData[pre + item]
								if(item=='EQAmount'){
									num=num/10000
								}
								var uu = this.getNum(num, j)
								//去年今年 用一个单位
								if (j == 1) {
									k = uu
								} else if (j == 2) {
									uu = k
								}
								var showNum=(num / uu.num).toFixed(uu.num>100?2:0)
								
								text1 += "<p>" + prefixStr[j] +keyStrT[dataIndex]+
									'<span style="' + style +
									'">' + (u[dataIndex]=='张'?num:showNum) + uu.u + u[dataIndex] + '</span></p>';

							}
							text1 += "<p>今年同期完成比" +
								'<span style="' + style +
								'">' + value[0].data + '%</span></p>';


							return `<p>` + value[0].marker + `${name}</p>` + text1
							// console.log(value)
						}
					},
					legend: {
						data: ['去年同期数据', '今年同期完成比']
					},
					grid: {
						top: 30,
						left: 2,
						right: 5,
						bottom: 20,
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: keyStr
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: '今年同期完成比',
							type: 'bar',
							stack: '总量', // 指定堆叠的组名
							label: {
								show: true,
								formatter: (params) => {
									if(params.value==0){
										return ""
									}else{
										return params.value + '%'
									}
								}
							},
							data: sz1
						},
						{
							name: '去年同期数据',
							type: 'bar',
							label: {
								show: true,
								formatter: (params) => {
									if(params.value==0){
										return ""
									}else{
										return params.value + '%'
									}
								}
							},
							stack: '总量', // 与产品A堆叠
							data: sz2
						},

					]
				};
				this.myChart.setOption(option);
			},
			getNum(num, j) {
				var str = {
					num: 1,
					u: ""
				}
				if (num > 10000) {
					str = {
						num: 10000,
						u: "万"
					}
				}
				if (num > 10000 * 10000) {
					str = {
						num: 10000 * 10000,
						u: "亿"
					}

				}
				if (j == 0) {
					if (num > 10000 * 10000 * 10000) {
						str = {
							num: 10000 * 10000 * 10000,
							u: "万亿"
						}
					}
				}

				return str
			},
			
			getPie(type) {
				//true  正常版本  false 个人版本
				var typebl = !(this.info.accountType == 3);
				var dataInterval = null;
				if (typebl) {
					if (this.type_head == 1) {

						dataInterval = [0, 75, 100,
							125, 150, 200, 400, 500,
							600, 1200, 1400, 1600, 1800,
							2600, 2800,
							3000, 4200,
							4800, 5200, 6500, 7000, 7500, 8000, 12000, 14000, 16000, 18000, 20000, 23000,
							25000, 30000, 35000, 40000, 999999
						];


					} else {
						dataInterval = [0, 500, 1000, 2000, 5000, 10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000,
							90000, 100000, 120000, 140000, 160000, 180000, 200000, 220000, 240000, 280000, 3200000,
							3500000, 400000, 500000,
							999999
						];
					}
				}


				this.headitemby = "";
				var showkey = "";
				var getData = this.indexData3.graphMap;
				for (var i in getData) {
					var item = getData[i]
					item.todayEQAmount2 = (item.todayEQAmount / 10000)

					if (this.type_head == 1) {
						this.showTopobj = item;
					}
				}

				this.indexData3.graphMap = getData
				//var unit = this.current ? '笔' : '元'
				var colorName = "#333"

				// this.showlist1 = ['收入', '利润', '次数','新电途'];
				var showlistColor = ['#5872c0', '#de6e6a', '#f3c96b', '#69be8d', '#c661b4'];
				// this.showlist1 = ['收入', '利润', '电量', '新电途'];
				// var sz2 = ['todayAmount', 'todayProfit', 'todayEQAmount2', 'todayXDTAmount'];

				this.showlist1 = ['收入', '利润', '电量', '新电途', '快电'];
				var sz2 = ['todayAmount', 'todayProfit', 'todayEQAmount2', 'todayXDTAmount', 'todayKDAmount'];
				if (this.showMonthlyCard && this.type_head == 2) {
					var sz2 = ['todayAmountC', 'todayProfitC', 'todayEQAmount2', 'todayXDTAmount', 'todayKDAmount'];
				}

				var zLevel = [20, 40, 10, 30, 9];
				//var sz2 = ['todayAmount', 'todayProfit', 'todayEQNum','todayXDTAmount'];
				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('pieEcharts'));
					this.myChart.on("dataZoom", (res) => {
						showkey = "";
						this.headitemby = "";
					});
				}
				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',
						lineStyle: {
							color: showlistColor[j]
						},
						itemStyle: {
							color: showlistColor[j]
						},
						z: zLevel[j],
						// label: {
						// 	show: true,
						// 	position: 'top'
						// },
						data: []
					}
					if (this.type_head == 1) {

						ap.symbolSize = 3;
					}
					var bl = true;
					for (var i in getData) {
						//var time=this.queryDate.replace("-","/").replace("-","/")
						//time+' '+i
						var obj = getData[i][sz2[j]];

						//**********
						if (typebl) {
							const min_v = Math.max(...dataInterval.filter((v) => v <= obj));
							// 2.寻找在数据间隔里大于amount的最小值
							const max_v = Math.min(...dataInterval.filter((v) => v > obj));
							//  3.寻找 min_v 所在的下标
							const index = dataInterval.findIndex((v) => v === min_v);
							//  4.计算该amount在y轴上应该展示的位置
							const y_value = ((obj - min_v) / (max_v - min_v)) * 10 + index * 10;


							obj = y_value;

						}

						//**********
						//'todayAmount', 'todayProfit', 'todayEQNum'
						// if (bl&&getData[i].todayAmount == 0 && getData[i].todayProfit == 0  &&getData[i].todayEQNum == 0) {
						// 	//&& &&getData[i].todayEQNum == 0
						// 	continue;
						// }

						bl = false;
						var time = i
						if (this.type_head == 1) {
							//time = i.substring(5)
						} else {

						}

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

					if (bl) {
						ap.data = [];
						for (var i in getData) {
							//var time=this.queryDate.replace("-","/").replace("-","/")
							//time+' '+i
							var obj = getData[i][sz2[j]];
							var time = i
							if (this.type_head == 1) {
								time = i.substring(5)
							} else {

							}
							// if(j!=2){
							// 	obj=obj.toFixed(2)
							// }						
							ap.data.push([time, obj]);
						}
					}

					list.push(ap)


				}
				var yshow = 0;
				// 指定图表的配置项和数据
				var option = {

					tooltip: {
						position: (e) => {
							var x = e[0]
							var y = e[1]

							if (this.windowWidth) {
								if (y < 100) {
									if (x < this.windowWidth / 2) {
										return ['30%', '60%']
									} else {
										return ['10%', '60%']
									}
								} else {
									if (x < this.windowWidth / 2) {
										return ['30%', '-45%']
									} else {
										return ['10%', '-45%']
									}
								}


							}

						},
						formatter: (value) => {
							//getPie
							var name = value[0].data[0];
							var info = getData[name];



							var style = "float: right;margin-left: 3px;"
							var text1 = ""
							for (var i in value) {
								var u = "元"
								var num = info[sz2[value[i].seriesIndex]];

								if (!num) {
									num = 0;
								}
								if (value[i].seriesName == '电量') {
									u = '度'
									num = num.toFixed(2)
								} else if (value[i].seriesName == '次数') {
									u = '次'
								} else {
									num = num.toFixed(2)
								}
								var markerU = "";

								if (this.type_head == 2) {
									if (!num) {
										num = 0;
									}
									if (value[i].seriesName == "电量") {
										u = "万度"
										num = (num / 10000).toFixed(2)
									}
									if (value[i].seriesName == "利润") {
										//u = "万元"
										if (this.showMonthlyCard) {
											markerU = "（含卡）"
											//num = info.todayProfitC
										}
									}
									if (value[i].seriesName == "收入") {
										u = "万元"
										num = info.todayAmountW

										if (this.showMonthlyCard) {
											markerU = "（含卡）"
											num = info.todayAmountCW
										}
									}
									if (!num) {
										num = 0;
									}
									num = parseFloat(num)
									num = num.toFixed(2)
								}




								text1 += "<p>" + value[i].marker + value[i].seriesName + markerU +
									'<span style="' + style +
									'">' + num + u + '</span></p>';

								if (this.type_head == 2) {

									if (value[i].seriesName == "收入") {

										if (this.showMonthlyCard) {
											markerU = "（含卡）"
											info.yoyNum = info.yoyNumC
											info.qoqNum = info.qoqNumC
										}

										if (name != this.queryTime2) {
											if (info.yoyNum != null) {
												text1 += "<p>" + value[i].marker + "收入同比" + (info.yoyNum < 0 ?
														'减少' : '增长') + '<span style="' + style +
													'">' + (info.yoyNum < 0 ? info.yoyNum * -1 : info.yoyNum) +
													'%' + '</span></p>';

											} else {
												text1 += "<p>" + value[i].marker + "收入同比" + '<span style="' +
													style +
													'">' + '无数据' + '</span></p>';
											}

											if (info.qoqNum != null) {
												text1 += "<p>" + value[i].marker + "收入环比" + (info.qoqNum < 0 ?
														'减少' : '增长') + '<span style="' + style +
													'">' + (info.qoqNum < 0 ? info.qoqNum * -1 : info.qoqNum) +
													'%' + '</span></p>';
											} else {
												text1 += "<p>" + value[i].marker + "收入环比" + '<span style="' +
													style +
													'">' + '无数据' + '</span></p>';
											}


										}
									}
								}
								if (i == value.length - 1 && this.showMonthlyCard) {

									text1 +=
										"<p><span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#FF3D00;'></span>6折卡数量" +
										'<span style="' + style +
										'">' + (info.discountCardBuyNum ? info.discountCardBuyNum : 0) +
										'张</span></p>';
									text1 +=
										"<p><span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#FF3D00;'></span>月卡数量" +
										'<span style="' + style +
										'">' + (info.monthCardBuyNum ? info.monthCardBuyNum : 0) + '张</span></p>';
									text1 +=
										"<p><span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#FF3D00;'></span>折扣卡金额" +
										'<span style="' + style +
										'">' + (info.cardBuyFee ? info.cardBuyFee : 0).toFixed(2) + '元</span></p>';
								}

							}
							if (this.type_head == 2) {
								text1 +=
									"<p><span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#19be6b;'></span>设备完好率" +
									'<span style="' + style +
									'">' + (info.operatingRate ? info.operatingRate : 100) + '%</span></p>';
							}
							if (this.type_head == 1) {
								//time = i.substring(5)
								var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
								var now = newDate(name);
								var day = now.getDay();
								var week = weeks[day];
								return `<p>${name} ${week}</p>` + text1
							} else {
								return `<p>${name}</p>` + text1
							}


						},

						trigger: 'axis',
						borderColor: "#F0F0F0",
						borderWidth: 1,
						backgroundColor: "#ffffff",
						textStyle: {
							color: "#333"
						}
					},
					legend: {

						itemGap: 1,
						data: this.showlist1,
						textStyle: {
							color: "#333"
						}
					},
					grid: {
						top: 45,
						left: 0,
						right: 20,
						bottom: 20,
						containLabel: true
					},

					xAxis: {
						//type: 'value',
						type: 'category',
						splitNumber: 4,
						boundaryGap: false,

						axisLabel: {
							formatter: (value) => {
								if (this.headitemby == "") {
									this.headitemby = value
								}
								var i = 0
								if (this.type_head == 1) {
									i = 0;
								} else {
									i = 3;
								}
								var showvalue = "";
								var key = value.substring(0, 8 - i);

								if (showkey == "" || value == this.headitemby) {
									showkey = key

									showvalue = value
									showvalue = value.substring(5 - i)
								} else {
									if (key != showkey) {
										showkey = key
										showvalue = value
										showvalue = value.substring(5 - i)
									} else {
										showvalue = value.substring(8 - i)
									}
								}
								return showvalue.replace("-", ".");

							},
							textStyle: {
								color: "#333"
							}
						},
						axisLine: {

							show: true,
							lineStyle: {
								color: "#333"
							}
						},
					},
					yAxis: {

						type: 'value',
						//	name: '单位('+this.typeN+')',
						axisLabel: {
							formatter: (v, i) => {

								if (dataInterval == null) {
									return v
								}
								if (i == 0) {
									yshow = 0
									return 0
								}
								if (yshow != parseInt(v / 10)) {
									yshow = parseInt(v / 10);
									return dataInterval[parseInt(v / 10)]
								} else {
									return ''
								}

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

					series: list
				};


				// option.dataZoom = [{
				// 		type: 'inside',
				// 		start: 0,
				// 		end: 100
				// 	},
				// 	{
				// 		start: 0,
				// 		end: 100
				// 	}
				// ]

				if (this.type_head == 1) {

				} else {
					//timelist.push(i)
				}


				// 使用刚指定的配置项和数据显示图表。
				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>
	/deep/.u-drawer {
		z-index: 99999999 !important;
	}

	.contentBodyName {
		padding: 0 36rpx 12rpx 36rpx;
	}

	.contentBody {
		color: #777777;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		padding: 0 16rpx;
		margin-bottom: 16rpx;

		.body1 {
			color: #333333;
			margin-left: 20rpx;
		}

		.body2 {
			display: flex;

			.body2-0 {
				width: 110rpx;
			}

			.body2-1 {
				padding: 0 8rpx;
				color: #00B962;

			}

			.body2-2 {
				width: 120rpx;
			}
		}

		.body3 {
			padding: 0 8rpx;
			color: #FF3D00;
		}
	}

	.indexData5content {
		padding: 40rpx 20rpx;

		.contentTitle {
			color: #333333;
			font-size: 40rpx;
			text-align: center;
			font-weight: bold;
			margin-bottom: 8px;
		}

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

			// margin: 16rpx;
			// padding:12rpx;
			img,
			svg {
				vertical-align: bottom;
				height: 44rpx;
				//margin-right: 8rpx;
			}

			.span1 {

				text-align: left;
				font-weight: bold;
				font-size: 36rpx;
				width: 310rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.color777 {
				color: #777777;
			}

			.color333 {
				color: #333333;
			}

			.span2 {

				border-right: 1px solid #ededed;

				width: 120rpx;
				padding: 0 8rpx;

				span {
					padding: 0 8rpx;
				}
			}

			.span3 {
				padding: 0 0 0 12rpx;

				span {
					padding: 0 8rpx;
				}

				width: 154rpx;

				.bot1span {
					color: #00B962;
				}

				.bot2span {
					color: #AAAAAA;
				}

				.bot3span {
					color: #FF3D00;
				}
			}

		}
	}

	.indexData4content {
		padding: 40rpx 20rpx;

		.contentTitle {
			color: #333333;
			font-size: 40rpx;
			text-align: center;
			font-weight: bold;
			margin-bottom: 8px;

		}

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

			justify-content: space-between;
			flex-direction: row;
			margin: 16rpx;
			padding: 12rpx;

			.span1 {
				img {
					vertical-align: bottom;
					height: 44rpx;
					margin-right: 8rpx;
				}

				font-weight: bold;
				font-size: 36rpx;
				width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.color777 {
				color: #777777;
			}

			.color333 {
				color: #333333;
			}

			.span2 {

				border-right: 1px solid #ededed;

				width: 120rpx;
				padding: 0 16rpx;

				span {
					padding: 0 8rpx;
				}
			}

			.span3 {
				padding: 0 0 0 16rpx;

				span {
					padding: 0 8rpx;
				}

				width: 154rpx;
				color: #333;

				.bot1span {
					color: #00B962;
				}

				.bot2span {
					color: #AAAAAA;
				}

				.bot3span {
					color: #FF3D00;
				}
			}

		}

		.u-collapse-bot0span {
			.contentItem {
				display: flex;
			}
		}

		.u-collapse-bot3span {
			.contentItem {
				margin: 0;
				padding: 0;

				.span1 {

					width: 310rpx;
				}
			}
		}
	}

	.chargingpile {

		img {
			vertical-align: bottom;
			height: 44rpx;
			margin-right: 8rpx;

		}

		p {

			color: #185AC6;
			font-size: 36rpx;
			font-weight: bold;

			span {
				color: #777777;
				margin-left: 8rpx;
				font-size: 32rpx;
				font-weight: normal;
			}
		}

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

			}

			span {
				margin: 0 8rpx;
			}

			.bot {
				display: inline-block;
				width: 24rpx;
				height: 24rpx;
				margin-left: 4rpx;

				border-radius: 999px;

			}

			.bot1 {
				background-color: #00B962;
			}

			.bot2 {
				//margin-left: 16rpx;
				background-color: #AAAAAA;
			}

			.bot3 {
				//margin-left: 16rpx;
				background-color: #FF3D00;
			}

			.bot1span {
				color: #00B962;
			}

			.bot2span {
				color: #AAAAAA;
			}

			.bot3span {
				color: #FF3D00;
			}

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

			.detailsline,
			.detailsline—bottom {

				display: flex;

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

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


				}
			}

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




	}

	.viewgun {
		position: relative;

		top: 200px;
		text-align: center;

		.viewspan {
			width: 30%;
			margin-left: 16rpx;
			display: inline;
		}
	}

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

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

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

	.detailstable {
		padding: 30rpx 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: 32rpx;
		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: 30rpx;

		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: 40rpx;
		position: relative;

		.screen {
			padding-bottom: 30px;
		}

		.screen-item {
			margin-bottom: 40rpx;

			.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 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;

		line-height: 40rpx;

		padding: 24rpx;


		position: fixed;
		// border-bottom: 1px solid #fff;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99999991;
		background-color: #00b962;

		.navbar-tit1 {
			font-weight: bold;
			font-size: 40rpx;
			display: flex;
		}

		.navbar-tit2 {
			font-size: 36rpx;

		}

	}

	.navbar-tit-box {
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
	}

	.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: 32rpx;

		.statisticsChart-head {
			margin-bottom: 10rpx;
			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;
				}
			}

			.h4-1 {
				display: flex;
				align-items: center;
				padding-left: 0;
				color: rgba(16, 16, 16, 1);

				img {
					margin-right: 8rpx;
				}

				&::after {
					content: none;
				}
			}

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

				p {
					color: #666;
				}
			}
		}

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

	.top-cover {
		// height: 470px;
		// margin-bottom: 70px;
		background: linear-gradient(179.94deg, rgba(0, 185, 98, 1) 71.55%, rgba(0, 196, 104, 0) 99.35%);

		.income {
			padding: 44rpx 32rpx 24rpx 32rpx;
			color: rgba(255, 255, 255, 1);

			.today-queryHeadTime {
				text-align: center;
				//font-size: 12px;
			}

			.today-income {
				margin-top: 4rpx;
				text-align: center;

				.number {
					font-weight: bold;
					font-size: 36px;

					text {
						margin-left: 8rpx;
					}
				}

				.text {
					font-size: 16px;
				}
			}

			.else {
				margin-top: 32rpx;
				display: flex;
				justify-content: space-between;

				.item {
					text-align: center;

					.item-number {
						font-weight: bold;
						font-size: 48rpx;
						margin-bottom: 8rpx;
					}

				}
			}
		}


	}
</style>