|
@@ -1,476 +1,599 @@
|
|
|
-<template>
|
|
|
- <view class="time-head">
|
|
|
- <ujp-navbar title="充电详情"></ujp-navbar>
|
|
|
- <view class="details-time">
|
|
|
- <view class="time">
|
|
|
- <view class="time1">
|
|
|
- <view class="time11">{{getday(chargeDetail.startTime?chargeDetail.startTime:chargeDetail.createTime)}}</view>
|
|
|
- <view class="time12">{{geth(chargeDetail.startTime?chargeDetail.startTime:chargeDetail.createTime)}}</view>
|
|
|
+<template>
|
|
|
+ <view class="time-head">
|
|
|
+ <ujp-navbar title="充电详情">
|
|
|
+ <view slot="right" style="margin-right: 10px;" @click="openModalBl=true">
|
|
|
+
|
|
|
+ <view class="iconfont qr-code">
|
|
|
+ 
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </ujp-navbar>
|
|
|
+ <u-modal v-model="openModalBl" @confirm="confirmPhoneBl" confirm-text="拨打电话" confirm-color="#606266"
|
|
|
+ :show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="consumerPhone"
|
|
|
+ :content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
|
|
|
+
|
|
|
+ <view class="details-time">
|
|
|
+ <view class="time">
|
|
|
+ <view class="time1">
|
|
|
+ <view class="time11">
|
|
|
+ {{getday(chargeDetail.startTime?chargeDetail.startTime:chargeDetail.createTime)}}</view>
|
|
|
+ <view class="time12">{{geth(chargeDetail.startTime?chargeDetail.startTime:chargeDetail.createTime)}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="time2">
|
|
|
+ <view class="time21">起</view>
|
|
|
+ <view class="time22"></view>
|
|
|
+ <view class="time21">止</view>
|
|
|
+ </view>
|
|
|
+ <view class="time1">
|
|
|
+ <view class="time11">{{getday(chargeDetail.endTime)}}</view>
|
|
|
+ <view class="time12">{{geth(chargeDetail.endTime)}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="oldTextjp18px">
|
|
|
+ <view class="details-row">
|
|
|
+ <p>充电时长</p>
|
|
|
+ <span>{{chargeDetail.chargingMinute != null ? getPercent(chargeDetail.chargingMinute) : '0秒'}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="details-row">
|
|
|
+ <p>充电度数</p>
|
|
|
+ <span>{{chargeDetail.electricQuantity != null ? chargeDetail.electricQuantity/10000 : '0.000'}}度</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="details" style="padding: 20rpx;" v-show="electricRecordListBl">
|
|
|
+ <view id="pieEcharts" style="min-height:240px;">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view style="color:#9e9e9e;margin-top: 4px;">注:充电时间每5分钟获取一次数据</view>
|
|
|
+ </view>
|
|
|
+ <view class="details">
|
|
|
+ <view class="details-title">
|
|
|
+ <h4 class="oldTextjp20px" oldstyle="font-size: 20px;">费用信息</h4>
|
|
|
+ </view>
|
|
|
+ <view class="oldTextjp18px" oldstyle="font-size: 18px;">
|
|
|
+ <view class="details-row">
|
|
|
+ <p>订单总额</p><span>{{chargeDetail.dueFee != null ? chargeDetail.dueFee.toFixed(2) : '0.00'}}元</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="details-row">
|
|
|
+ <p>电费</p>
|
|
|
+ <span>{{chargeDetail.totalElecMoney != null ? chargeDetail.totalElecMoney.toFixed(2) : '0.00'}}元</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="details-row">
|
|
|
+ <p>服务费</p>
|
|
|
+ <span>{{chargeDetail.totalServiceMoney != null ? chargeDetail.totalServiceMoney.toFixed(2) : '0.00'}}元</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="details-row"
|
|
|
+ v-if="chargeDetail.serviceDiscountRatio&&chargeDetail.serviceDiscountRatio!=100">
|
|
|
+ <p>折前服务费</p>
|
|
|
+ <span>{{(chargeDetail.dueServiceMoney?chargeDetail.dueServiceMoney:0).toFixed(2)}}元</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="details-row"
|
|
|
+ v-if="chargeDetail.serviceDiscountRatio&&chargeDetail.serviceDiscountRatio!=100">
|
|
|
+ <p>服务费折扣</p><span style="color:#ef7041">{{discountRatio10(chargeDetail.serviceDiscountRatio)}}折</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="details-row">
|
|
|
+ <p>优惠券抵扣</p><span style="color:#ef7041">{{userCouponObj? userCouponObj.useText : '未使用'}}</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="details-row" v-if="chargeDetail.userCardId">
|
|
|
+ <p>会员活动</p><span style="color:#ef7041">充电月卡</span>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="time2">
|
|
|
- <view class="time21">起</view>
|
|
|
- <view class="time22"></view>
|
|
|
- <view class="time21">止</view>
|
|
|
- </view>
|
|
|
- <view class="time1">
|
|
|
- <view class="time11">{{getday(chargeDetail.endTime)}}</view>
|
|
|
- <view class="time12">{{geth(chargeDetail.endTime)}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="oldTextjp18px" >
|
|
|
- <view class="details-row"><p>充电时长</p><span>{{chargeDetail.chargingMinute != null ? getPercent(chargeDetail.chargingMinute) : '0秒'}}</span></view>
|
|
|
- <view class="details-row"><p>充电度数</p><span>{{chargeDetail.electricQuantity != null ? chargeDetail.electricQuantity/10000 : '0.000'}}度</span></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="details" style="padding: 20rpx;" v-show="electricRecordListBl">
|
|
|
- <view id="pieEcharts" style="min-height:240px;">
|
|
|
-
|
|
|
- </view>
|
|
|
- <view style="color:#9e9e9e;margin-top: 4px;">注:充电时间每5分钟获取一次数据</view>
|
|
|
- </view>
|
|
|
- <view class="details">
|
|
|
- <view class="details-title">
|
|
|
- <h4 class="oldTextjp20px" oldstyle="font-size: 20px;">费用信息</h4>
|
|
|
- </view>
|
|
|
- <view class="oldTextjp18px" oldstyle="font-size: 18px;">
|
|
|
- <view class="details-row"><p>订单总额</p><span>{{chargeDetail.actualFee != null ? chargeDetail.actualFee.toFixed(2) : '0.00'}}元</span></view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="details-row"><p>电费</p><span>{{chargeDetail.totalElecMoney != null ? chargeDetail.totalElecMoney.toFixed(2) : '0.00'}}元</span></view>
|
|
|
-
|
|
|
- <view class="details-row" ><p>服务费</p><span>{{chargeDetail.totalServiceMoney != null ? chargeDetail.totalServiceMoney.toFixed(2) : '0.00'}}元</span></view>
|
|
|
- <view class="details-row" v-if="chargeDetail.serviceDiscountRatio&&chargeDetail.serviceDiscountRatio!=100" ><p>折前服务费</p><span>{{(chargeDetail.dueServiceMoney?chargeDetail.dueServiceMoney:0).toFixed(2)}}元</span></view>
|
|
|
-
|
|
|
- <view class="details-row" v-if="chargeDetail.serviceDiscountRatio&&chargeDetail.serviceDiscountRatio!=100" ><p>服务费折扣</p><span>{{discountRatio10(chargeDetail.serviceDiscountRatio)}}折</span></view>
|
|
|
-
|
|
|
- <!-- <view class="details-row" v-if="chargeDetail.discountAmount" ><p>服务费</p><span>{{chargeDetail.totalServiceMoney != null ? (chargeDetail.totalServiceMoney*100-chargeDetail.discountAmount*100)/100 : '0.00'}}元({{chargeDetail.totalServiceMoney}}-{{chargeDetail.discountAmount}})</span></view>
|
|
|
- -->
|
|
|
- <view class="details-row"><p>优惠券抵扣</p><span style="color:red">{{userCouponObj? userCouponObj.useText : '未使用'}}</span></view>
|
|
|
- <view class="details-row" v-if="chargeDetail.discountAmount" ><p>实际减免</p><span >-{{chargeDetail.discountAmount.toFixed(2)}}元</span></view>
|
|
|
-
|
|
|
- <view class="details-row" v-if="chargeDetail.userCardId"><p>会员活动</p><span >充电月卡</span></view>
|
|
|
- <!--
|
|
|
- <view class="details-row"><p>开始时间</p><span>{{chargeDetail.startTime}}</span></view>
|
|
|
- <view class="details-row"><p>结束时间</p><span>{{chargeDetail.endTime}}</span></view>
|
|
|
-
|
|
|
- --> </view>
|
|
|
- </view>
|
|
|
- <view class="details">
|
|
|
- <view class="details-title">
|
|
|
- <h4 class="oldTextjp20px" >更多信息</h4>
|
|
|
- </view>
|
|
|
- <view class="oldTextjp18px" >
|
|
|
- <view class="details-row"><p>结束原因</p><span>{{chargeDetail.remark}}</span></view>
|
|
|
- <view class="details-row"><p>订单状态</p><span>{{chargeDetail.statusText}}</span></view>
|
|
|
- <view class="details-row" v-if="false"><p>更新时间</p><span>{{chargeDetail.updateTime}}</span></view>
|
|
|
- <view class="details-row" ><p>充电站点</p><span>{{chargeDetail.stationName}}</span></view>
|
|
|
- <view class="details-row"><p>充电桩编号</p><span>{{chargeDetail.deviceName}}</span></view>
|
|
|
- <view class="details-row"><p>充电车辆</p><span>{{chargeDetail.carNumber}}</span></view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="" style="padding: 0px 20px;">
|
|
|
- <u-button class="detailsBtn-btn oldTextjp18px" oldstyle="font-size: 16px;" type="success" shape="circle" @click="toHome">返回主页</u-button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import * as API from '@/apis/index.js'
|
|
|
- import * as echarts from "echarts";
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- id: '',
|
|
|
- myChart:null,
|
|
|
- electricRecordList:[],
|
|
|
- chargeDetail: {},
|
|
|
- userCouponObj:{},
|
|
|
- electricRecordListBl:true,
|
|
|
- elderStatus: false,
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(op) {
|
|
|
- if(op.id) {
|
|
|
- this.id = op.id;
|
|
|
- this.getchargingDetail();
|
|
|
- }
|
|
|
-
|
|
|
- if(this.carhelp.get("getElderModeClass") == "长辈模式") {
|
|
|
- this.elderStatus = true;
|
|
|
- } else {
|
|
|
- this.elderStatus = false;
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getday(time){
|
|
|
- if(time){
|
|
|
- return time.substring(5,10).replace('-','月')+'日'
|
|
|
- }else
|
|
|
- return''
|
|
|
- },
|
|
|
- geth(time){
|
|
|
- if(time){
|
|
|
-
|
|
|
- return time.substring(11,16)
|
|
|
- }else
|
|
|
- return''
|
|
|
- },
|
|
|
- getPercent(estimateMinute) {
|
|
|
- var value="";
|
|
|
-
|
|
|
- var ms =estimateMinute
|
|
|
- if (ms > 0) {
|
|
|
- var Hour = parseInt(Math.floor(ms / 60 ));
|
|
|
- var Fen = parseInt(Math.floor(ms % 60 ));
|
|
|
- // value = Hour + "小时" + Fen+"分钟"
|
|
|
- if(Hour){
|
|
|
- value += Hour + "小时"
|
|
|
- }
|
|
|
-
|
|
|
- if(Fen){
|
|
|
- value += Fen+"分钟"
|
|
|
- }
|
|
|
- }else{
|
|
|
- value="0分钟"
|
|
|
- }
|
|
|
-
|
|
|
- return value;
|
|
|
- },
|
|
|
- toHome() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/index/index'
|
|
|
- })
|
|
|
- },
|
|
|
- getPie(data){
|
|
|
-
|
|
|
- if (!this.myChart) {
|
|
|
- this.myChart = echarts.init(document.getElementById('pieEcharts'));
|
|
|
- // this.myChart.on("dataZoom", (res) => {
|
|
|
- // showkey = "";
|
|
|
- // this.headitemby = "";
|
|
|
- // });
|
|
|
- }
|
|
|
- var timeList=[]
|
|
|
- var seriesList1=[]
|
|
|
- var seriesList2=[]
|
|
|
- var seriesList3=[]
|
|
|
- //var sz2 = ['soc', 'power', 'ampere', 'voltage','temperature'];
|
|
|
- console.log(data)
|
|
|
- var dataInterval=[0,10,20,30,40,50,60,70,80,90,100]
|
|
|
- for(var i in data){
|
|
|
- var item=data[i]
|
|
|
- timeList.push(this.geth(item.recordTime));
|
|
|
- seriesList1.push(item.soc?item.soc:'')
|
|
|
- seriesList2.push(item.power?(item.power/1000).toFixed(1):'')
|
|
|
- //seriesList3.push(item.temperature?item.temperature:0)
|
|
|
- seriesList3.push(item.temperature?item.temperature:'')
|
|
|
- }
|
|
|
-
|
|
|
- var spaceNum=5
|
|
|
- let maxA = Math.max(...seriesList2); // 最大值A
|
|
|
- let maxint = Math.ceil(maxA / spaceNum); //最大平均值(向上取整)= 最大值A / 间隔数
|
|
|
- let maxB = maxint * spaceNum; // 最大值B = 最大平均值 * 间隔数 (注:最大值B>最大值A)
|
|
|
- var max= Math.max(maxB, 10); // 为了防止maxB数据为0时,Y轴不显示,给个默认最大值10
|
|
|
- var interval=max/spaceNum;
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- const colors = ['#ea9832', '#429fc8', '#b13331'];
|
|
|
-
|
|
|
- var option = {
|
|
|
- color: colors,
|
|
|
- tooltip: {
|
|
|
- formatter: (value) => {
|
|
|
- console.log(value)
|
|
|
- var name = value[0].axisValue;
|
|
|
- var style = "float: right;margin-left: 3px;"
|
|
|
- var text1 = ""
|
|
|
- var ulist=['%','kW','℃','','','']
|
|
|
- for (var i in value) {
|
|
|
- var u = ulist[i];
|
|
|
- if(value[i].data==''){
|
|
|
- continue
|
|
|
- }
|
|
|
- text1 += "<p>" + value[i].marker + value[i].seriesName + '<span style="' + style +
|
|
|
- '">' + value[i].data + u + '</span></p>';
|
|
|
- }
|
|
|
- return `<p>${name}</p>` + text1
|
|
|
- },
|
|
|
- trigger: 'axis',
|
|
|
- },
|
|
|
- grid: {
|
|
|
-
|
|
|
-
|
|
|
- left: '8%',
|
|
|
- right: '10%',
|
|
|
- bottom: '10%',
|
|
|
- // containLabel: true
|
|
|
- },
|
|
|
-
|
|
|
- legend: {
|
|
|
- data: ['SOC', '功率', '温度']
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- axisTick: {
|
|
|
- alignWithLabel: true
|
|
|
- },
|
|
|
-
|
|
|
- splitNumber: 2,
|
|
|
- // prettier-ignore
|
|
|
- data:timeList
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
-
|
|
|
- name: '℃/SOC',
|
|
|
- //data: [0,10,20,30,40,50,60,70,80,90,100],
|
|
|
- max:100,
|
|
|
- min:0,
|
|
|
- minInterval:10,
|
|
|
- position: 'right',
|
|
|
- alignTicks: true,
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: colors[0]
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
-
|
|
|
- formatter: '{value}'
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
-
|
|
|
- type: 'value',
|
|
|
- name: 'kW',
|
|
|
- position: 'left',
|
|
|
- alignTicks: true,
|
|
|
- interval:interval,
|
|
|
- max:max,
|
|
|
- min:0,
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: colors[1]
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value}'
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'SOC',
|
|
|
- type: 'line',
|
|
|
- symbolSize:3,
|
|
|
- data: seriesList1
|
|
|
- },
|
|
|
- {
|
|
|
- name: '功率',
|
|
|
- type: 'line',
|
|
|
- symbolSize:3,
|
|
|
- yAxisIndex: 1,
|
|
|
- data: seriesList2
|
|
|
- },
|
|
|
- {
|
|
|
- name: '温度',
|
|
|
- type: 'line',
|
|
|
- symbolSize:3,
|
|
|
- yAxisIndex: 0,
|
|
|
- data: seriesList3
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- console.log(option)
|
|
|
-
|
|
|
- this.myChart.setOption(option);
|
|
|
-
|
|
|
- },
|
|
|
- getchargingDetail() {
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.chargingDetail(this.id).then((res) => {
|
|
|
- uni.hideLoading();
|
|
|
-
|
|
|
- this.chargeDetail = res.data.chargingRecord;
|
|
|
- this.userCouponObj = res.data.userCoupon;
|
|
|
- this.electricRecordList=res.data.electricRecordList
|
|
|
+
|
|
|
+ <view class="details-row" v-if="chargeDetail.discountAmount">
|
|
|
+ <p>实际减免</p><span style="color:#ef7041">-{{chargeDetail.discountAmount.toFixed(2)}}元</span>
|
|
|
+ </view>
|
|
|
+ <view class="details-row">
|
|
|
+ <p>实付款</p>
|
|
|
+ <span style="color:#ef7041;font-size: 20px;" ><b>{{chargeDetail.actualFee != null ? chargeDetail.actualFee.toFixed(2) : '0.00'}}元</b></span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style=" border-top: dashed 1px #777; margin-top: 10px;">
|
|
|
+ <view class="details-row"><p>开始时间</p><span style="color:#777777">{{chargeDetail.startTime}}</span></view>
|
|
|
+ <view class="details-row"><p>结束时间</p><span style="color:#777777">{{chargeDetail.endTime}}</span></view>
|
|
|
|
|
|
- if(res.data.electricRecordList&&res.data.electricRecordList.length){
|
|
|
-
|
|
|
- this.getPie(res.data.electricRecordList);
|
|
|
-
|
|
|
- }else{
|
|
|
- this.electricRecordListBl=false
|
|
|
- }
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-<style>
|
|
|
- page{
|
|
|
- background-color: #F7F7F7;
|
|
|
- }
|
|
|
-</style>
|
|
|
-<style lang="scss" scoped>
|
|
|
- .time-head{
|
|
|
- background: linear-gradient(
|
|
|
- 180deg, rgba(0,185,98,1) 0%,rgba(246,248,248,1) 240px);
|
|
|
- padding-bottom: 20px;
|
|
|
- }
|
|
|
- .details-time{
|
|
|
- background: linear-gradient(180deg, #b7ebcf 0%,rgba(255,255,255,1) 33%);
|
|
|
- .time{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- border-bottom: 1px solid #E8E8E8;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- .time1{
|
|
|
- .time11{
|
|
|
- font-size: 28rpx;
|
|
|
- margin-bottom: 4rpx;
|
|
|
- }
|
|
|
- .time12{
|
|
|
- font-size: 48rpx;
|
|
|
- color: #101010;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .time2{
|
|
|
- color: #B8B8B8;
|
|
|
- align-items: center;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .time21{
|
|
|
- border: 1px solid #B8B8B8;
|
|
|
- border-radius: 100rpx;
|
|
|
- line-height: 46rpx;
|
|
|
- height: 48rpx;
|
|
|
- width: 48rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .time22{
|
|
|
- width:200rpx;
|
|
|
- border-top: 1px solid #CFCFCF ;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .oldTextClassF{
|
|
|
- .oldTextjp18px{
|
|
|
- font-size: 36rpx !important;
|
|
|
- }
|
|
|
- .oldTextjp20px{
|
|
|
- font-size: 40rpx !important;
|
|
|
- }
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="details" style="margin-bottom: 60px;">
|
|
|
+ <view class="details-title">
|
|
|
+ <h4 class="oldTextjp20px">更多信息</h4>
|
|
|
+ </view>
|
|
|
+ <view class="oldTextjp18px">
|
|
|
+ <view class="details-row">
|
|
|
+ <p>结束原因</p><span>{{chargeDetail.remark}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="details-row">
|
|
|
+ <p>订单状态</p><span>{{chargeDetail.statusText}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="details-row" v-if="false">
|
|
|
+ <p>更新时间</p><span>{{chargeDetail.updateTime}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="details-row">
|
|
|
+ <p>充电站点</p><span>{{chargeDetail.stationName}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="details-row">
|
|
|
+ <p>充电桩编号</p><span>{{chargeDetail.deviceName}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="details-row">
|
|
|
+ <p>充电车辆</p><span>{{chargeDetail.carNumber}}</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="buttonClass" >
|
|
|
+ <u-button size="medium" class="detailsBtn-btn " :customStyle="customStyle" type="info" shape="circle"
|
|
|
+ @click="openModalBl=true">
|
|
|
+ <view class="iconfont ">
|
|
|
+ 
|
|
|
+ </view>
|
|
|
+ 联系客服</u-button>
|
|
|
+ <u-button class="detailsBtn-btn " size="medium" type="success" shape="circle"
|
|
|
+ @click="gotoUrl('pages/user/message')">填写反馈意见</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis/index.js'
|
|
|
+ import * as echarts from "echarts";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ myChart: null,
|
|
|
+ electricRecordList: [],
|
|
|
+ chargeDetail: {},
|
|
|
+ userCouponObj: {},
|
|
|
+ electricRecordListBl: true,
|
|
|
+ elderStatus: false,
|
|
|
+ consumerPhone: "",
|
|
|
+ openModalBl: false,
|
|
|
+ customStyle:{
|
|
|
+ color: '#00B962'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ if (op.id) {
|
|
|
+ this.id = op.id;
|
|
|
+ this.getchargingDetail();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.carhelp.get("getElderModeClass") == "长辈模式") {
|
|
|
+ this.elderStatus = true;
|
|
|
+ } else {
|
|
|
+ this.elderStatus = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ var consumerPhone = this.carhelp.getConfig().consumerPhone
|
|
|
+ // img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"
|
|
|
+ if (consumerPhone) {
|
|
|
+ this.consumerPhone = consumerPhone
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ confirmPhoneBl() {
|
|
|
+ this.openModalBl = false;
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: this.consumerPhone //仅为示例
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ getday(time) {
|
|
|
+ if (time) {
|
|
|
+ return time.substring(5, 10).replace('-', '月') + '日'
|
|
|
+ } else
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ geth(time) {
|
|
|
+ if (time) {
|
|
|
+
|
|
|
+ return time.substring(11, 16)
|
|
|
+ } else
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ getPercent(estimateMinute) {
|
|
|
+ var value = "";
|
|
|
+
|
|
|
+ var ms = estimateMinute
|
|
|
+ if (ms > 0) {
|
|
|
+ var Hour = parseInt(Math.floor(ms / 60));
|
|
|
+ var Fen = parseInt(Math.floor(ms % 60));
|
|
|
+ // value = Hour + "小时" + Fen+"分钟"
|
|
|
+ if (Hour) {
|
|
|
+ value += Hour + "小时"
|
|
|
+ }
|
|
|
+
|
|
|
+ if (Fen) {
|
|
|
+ value += Fen + "分钟"
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ value = "0分钟"
|
|
|
+ }
|
|
|
+
|
|
|
+ return value;
|
|
|
+ },
|
|
|
+ toHome() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPie(data) {
|
|
|
+
|
|
|
+ if (!this.myChart) {
|
|
|
+ this.myChart = echarts.init(document.getElementById('pieEcharts'));
|
|
|
+ // this.myChart.on("dataZoom", (res) => {
|
|
|
+ // showkey = "";
|
|
|
+ // this.headitemby = "";
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ var timeList = []
|
|
|
+ var seriesList1 = []
|
|
|
+ var seriesList2 = []
|
|
|
+ var seriesList3 = []
|
|
|
+ //var sz2 = ['soc', 'power', 'ampere', 'voltage','temperature'];
|
|
|
+ console.log(data)
|
|
|
+ var dataInterval = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
|
|
|
+ for (var i in data) {
|
|
|
+ var item = data[i]
|
|
|
+ timeList.push(this.geth(item.recordTime));
|
|
|
+ seriesList1.push(item.soc ? item.soc : '')
|
|
|
+ seriesList2.push(item.power ? (item.power / 1000).toFixed(1) : '')
|
|
|
+ //seriesList3.push(item.temperature?item.temperature:0)
|
|
|
+ seriesList3.push(item.temperature ? item.temperature : '')
|
|
|
+ }
|
|
|
+
|
|
|
+ var spaceNum = 5
|
|
|
+ let maxA = Math.max(...seriesList2); // 最大值A
|
|
|
+ let maxint = Math.ceil(maxA / spaceNum); //最大平均值(向上取整)= 最大值A / 间隔数
|
|
|
+ let maxB = maxint * spaceNum; // 最大值B = 最大平均值 * 间隔数 (注:最大值B>最大值A)
|
|
|
+ var max = Math.max(maxB, 10); // 为了防止maxB数据为0时,Y轴不显示,给个默认最大值10
|
|
|
+ var interval = max / spaceNum;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const colors = ['#ea9832', '#429fc8', '#b13331'];
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ color: colors,
|
|
|
+ tooltip: {
|
|
|
+ formatter: (value) => {
|
|
|
+ console.log(value)
|
|
|
+ var name = value[0].axisValue;
|
|
|
+ var style = "float: right;margin-left: 3px;"
|
|
|
+ var text1 = ""
|
|
|
+ var ulist = ['%', 'kW', '℃', '', '', '']
|
|
|
+ for (var i in value) {
|
|
|
+ var u = ulist[i];
|
|
|
+ if (value[i].data == '') {
|
|
|
+ continue
|
|
|
+ }
|
|
|
+ text1 += "<p>" + value[i].marker + value[i].seriesName + '<span style="' + style +
|
|
|
+ '">' + value[i].data + u + '</span></p>';
|
|
|
+ }
|
|
|
+ return `<p>${name}</p>` + text1
|
|
|
+ },
|
|
|
+ trigger: 'axis',
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+
|
|
|
+
|
|
|
+ left: '8%',
|
|
|
+ right: '10%',
|
|
|
+ bottom: '10%',
|
|
|
+ // containLabel: true
|
|
|
+ },
|
|
|
+
|
|
|
+ legend: {
|
|
|
+ data: ['SOC', '功率', '温度']
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
+ },
|
|
|
+
|
|
|
+ splitNumber: 2,
|
|
|
+ // prettier-ignore
|
|
|
+ data: timeList
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
+
|
|
|
+ name: '℃/SOC',
|
|
|
+ //data: [0,10,20,30,40,50,60,70,80,90,100],
|
|
|
+ max: 100,
|
|
|
+ min: 0,
|
|
|
+ minInterval: 10,
|
|
|
+ position: 'right',
|
|
|
+ alignTicks: true,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+
|
|
|
+ formatter: '{value}'
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+
|
|
|
+ type: 'value',
|
|
|
+ name: 'kW',
|
|
|
+ position: 'left',
|
|
|
+ alignTicks: true,
|
|
|
+ interval: interval,
|
|
|
+ max: max,
|
|
|
+ min: 0,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ],
|
|
|
+ series: [{
|
|
|
+ name: 'SOC',
|
|
|
+ type: 'line',
|
|
|
+ symbolSize: 3,
|
|
|
+ data: seriesList1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '功率',
|
|
|
+ type: 'line',
|
|
|
+ symbolSize: 3,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: seriesList2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '温度',
|
|
|
+ type: 'line',
|
|
|
+ symbolSize: 3,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: seriesList3
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ console.log(option)
|
|
|
+
|
|
|
+ this.myChart.setOption(option);
|
|
|
+
|
|
|
+ },
|
|
|
+ getchargingDetail() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.chargingDetail(this.id).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+
|
|
|
+ this.chargeDetail = res.data.chargingRecord;
|
|
|
+ this.userCouponObj = res.data.userCoupon;
|
|
|
+ this.electricRecordList = res.data.electricRecordList
|
|
|
+
|
|
|
+ if (res.data.electricRecordList && res.data.electricRecordList.length) {
|
|
|
+
|
|
|
+ this.getPie(res.data.electricRecordList);
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.electricRecordListBl = false
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ page {
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .time-head {
|
|
|
+ background: linear-gradient(180deg, rgba(0, 185, 98, 1) 0%, rgba(246, 248, 248, 1) 240px);
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .details-time {
|
|
|
+ background: linear-gradient(180deg, #b7ebcf 0%, rgba(255, 255, 255, 1) 33%);
|
|
|
+
|
|
|
+ .time {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #E8E8E8;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+
|
|
|
+ .time1 {
|
|
|
+ .time11 {
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time12 {
|
|
|
+ font-size: 48rpx;
|
|
|
+ color: #101010;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .time2 {
|
|
|
+ color: #B8B8B8;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .time21 {
|
|
|
+ border: 1px solid #B8B8B8;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ line-height: 46rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ width: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time22 {
|
|
|
+ width: 200rpx;
|
|
|
+ border-top: 1px solid #CFCFCF;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .oldTextClassF {
|
|
|
+ .oldTextjp18px {
|
|
|
+ font-size: 36rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oldTextjp20px {
|
|
|
+ font-size: 40rpx !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailsBtn {
|
|
|
+ margin: 16px;
|
|
|
+
|
|
|
+ .detailsBtn-btn {
|
|
|
+ border-color: #00B962 !important;
|
|
|
+ border-radius: 8px !important;
|
|
|
+ background: none !important;
|
|
|
+ color: #00B962 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .details-title {
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ font-weight: bold;
|
|
|
+ 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: 10px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ color: #333;
|
|
|
+ width: 180rpx;
|
|
|
+ min-width: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #101010;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .details,
|
|
|
+ .details-time {
|
|
|
+ margin: 32rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0px 2px 6px 0px #00b96226;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ .details-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: normal;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .details-price {
|
|
|
+ margin-top: 28px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-size: 36px;
|
|
|
+ color: #FF6200;
|
|
|
+ line-height: 36px;
|
|
|
+ margin: 0 4px;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #FF6200;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .details-main {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ color: #777;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .qr-code {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #666666;
|
|
|
+ // position: absolute;
|
|
|
+ right: 16px;
|
|
|
}
|
|
|
-
|
|
|
- .detailsBtn{
|
|
|
- margin: 16px;
|
|
|
+ .buttonClass{
|
|
|
+ text-align: center;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0px;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px 0;
|
|
|
.detailsBtn-btn{
|
|
|
- border-color:#00B962!important;
|
|
|
- border-radius: 8px!important;
|
|
|
- background: none!important;
|
|
|
- color:#00B962!important;
|
|
|
- }
|
|
|
- }
|
|
|
- .details-title{
|
|
|
- margin-bottom: 16px;
|
|
|
- h4{
|
|
|
- font-weight: bold;
|
|
|
- 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: 10px;
|
|
|
-
|
|
|
- p{
|
|
|
- color:#333;
|
|
|
- width: 180rpx;
|
|
|
- min-width: 80px;
|
|
|
- }
|
|
|
- span{
|
|
|
- color:#101010;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- .details,.details-time{
|
|
|
- margin: 32rpx;
|
|
|
- padding: 40rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0px 2px 6px 0px #00b96226;
|
|
|
- border: 1px solid rgba(255, 255, 255, 1);
|
|
|
- .details-head{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- h4{
|
|
|
- font-size: 18px;
|
|
|
- font-weight: normal;
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
+ margin:0 16px;
|
|
|
}
|
|
|
- .details-price{
|
|
|
- margin-top: 28px;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- justify-content: center;
|
|
|
- h3{
|
|
|
- font-size: 36px;
|
|
|
- color:#FF6200;
|
|
|
- line-height: 36px;
|
|
|
- margin: 0 4px;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- span{
|
|
|
- font-size: 20px;
|
|
|
- color:#FF6200;
|
|
|
- }
|
|
|
- }
|
|
|
- .details-main{
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 20px;
|
|
|
- p{
|
|
|
- color:#777;
|
|
|
- margin-top: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+ }
|
|
|
+</style>
|