12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754 |
- <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:240px;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+'-01'"
- :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 chargingpile" v-if="indexData4">
- <view class="statisticsChart-head" style="margin-top: 20px;">
- <h4>充电枪运行情况</h4>
- </view>
- <view class="details detailstablepile" style="padding: 12px 0 12px 12px ;">
- <p><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"><img src="@/assets/img/riFill-charging-pile-fill2.svg">
- </img>慢充枪<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>
- <u-popup v-model="popupShow5" mode="bottom" border-radius="30" >
- <view class="indexData4content">
- <view class="contentTitle">
- {{indexData4Obj.typeName}}枪{{indexData4Obj.text}}明细
- </view>
- <scroll-view scroll-y="true" style="height: 520rpx;">
- <view >
- <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: 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>
- <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&&stationFlowList.length>3"
- @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>
- <u-collapse :headStyle="{
- color:'#101010',
- fontWeight: 'bold',
- padding:'24rpx 0',
- borderBottom: '1px solid #ededed'
-
- }" v-if="stationFlowList.length&&stationFlowList.length<=3">
- <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.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>
- <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,
- newDate
- } from '@/utils'
- export default {
- data() {
- return {
- popupShow3: false,
- params: {
- year: true,
- month: true,
- day: false,
- hour: false,
- minute: false,
- second: false
- },
- indexData4List:[],
- indexData4Obj:{},
- headitemby: "",
- isinit: true,
- form: {},
- form2: {},
- selecttype: "",
- selectstationId: "",
- selectdeviceNo: "",
- popupShow2: false,
- popupShow: false,
- popupShow4: false,
- popupShow5: false,
- nowTime: 0,
- selectstationId2: "",
- selectstationIndex: 0,
- selectstationName: "",
- info: {},
- title: "",
- showdate: false,
- showdate2: false,
- queryTime: "",
- queryTime2: "",
- indexData: {},
- indexData3: null,
- indexData2: null,
- indexData4: 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);
- }
- API.homeChargingGunStatus().then((res) => {
-
- this.indexData4 = res.data;
-
- }).catch(error => {
- uni.showToast({
-
- title: error
- })
- })
- },
- 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(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.getStation()
- },
- computed: {
- // startTime(){
- // return this.queryTime+'-1'
- // },
- startTime2() {
- return this.queryTime2 + '-01'
- },
- },
- methods: {
- 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) => {
- 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;
- // if( this.info.accountType==3){
- // //getPie2
- // this.getPie2()
- // }else{
- // //getPie
- // this.getPie()
- // }
- 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;
- 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 + '-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()
- },
- getPie(type) {
- //true 正常版本 false 个人版本
- var typebl = !(this.info.accountType == 3);
- var dataInterval = null;
- if (typebl) {
- if (this.type_head == 1) {
- dataInterval = [0, 25, 50, 75, 100,
- 125, 150, 200, 250, 300, 400, 500,
- 600, 800, 1000, 1200, 1400, 1600, 1800,
- 2000, 2300, 2600, 2800,
- 3000, 3400, 3800, 4200,
- 4800, 5200, 5600, 6000, 6500, 7000, 7500, 8000, 9000, 10000, 12000, 14000, 16000, 20000,
- 30000, 999999
- ];
- } else {
- dataInterval = [0, 500, 1000, 2000, 5000, 10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000,
- 90000, 100000, 120000, 140000, 160000, 180000, 200000, 250000, 300000, 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)
- }
- this.indexData3.graphMap = getData
- //var unit = this.current ? '笔' : '元'
- var colorName = "#333"
- // this.showlist1 = ['收入', '利润', '次数','新电途'];
- var showlistColor = ['#5872c0', '#de6e6a', '#f3c96b', '#69be8d'];
- this.showlist1 = ['收入', '利润', '电量', '新电途'];
- var sz2 = ['todayAmount', 'todayProfit', 'todayEQAmount2', 'todayXDTAmount'];
- var zLevel = [2, 4, 1, 3];
- //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: {
- 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 (value[i].seriesName == '电量') {
- u = '度'
- num = num.toFixed(2)
- } else if (value[i].seriesName == '次数') {
- u = '次'
- } else {
- num = num.toFixed(2)
- }
- text1 += "<p>" + value[i].marker + value[i].seriesName + '<span style="' + style +
- '">' + num + u + '</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: {
- data: this.showlist1,
- textStyle: {
- color: "#333"
- }
- },
- grid: {
- top: '13%',
- left: '3%',
- right: '8%',
- bottom: '8%',
- 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) => {
- //console.log(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)
- }
- 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>
- .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;
- display: flex;
- 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;
- }
- }
-
- }
- }
- .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 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: 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>
|