|
|
@@ -18,27 +18,27 @@
|
|
|
</view>
|
|
|
<view @click="exiting.visible = false" class="mask"></view>
|
|
|
</view>
|
|
|
- <view v-if="orderInfo.status == 0" class="timer">
|
|
|
+ <view v-if="deviceInfo.orderStatus == 1" class="timer">
|
|
|
<view class="value" style="font-size: 22px;">充电正在启动中......</view>
|
|
|
<view v-if="isShowBtn" class="name" style="color: red;font-size: 14px;">长时间无法启动可点击“长按结束充电”按钮结束订单。</view>
|
|
|
</view>
|
|
|
<!-- 主图 -->
|
|
|
<view class="app-flex c-center host-graph">
|
|
|
- <image src="@/static/img/charging-01.png" mode="widthFix" class="image"></image>
|
|
|
+ <image
|
|
|
+ src="https://national-motion.oss-cn-beijing.aliyuncs.com/20251230/9ca38a2aa5784e06b9cac31587b188b3.png"
|
|
|
+ mode="widthFix" class="image"></image>
|
|
|
</view>
|
|
|
<!-- 主参数 -->
|
|
|
<view class="parameter-info-box">
|
|
|
<!-- 充电动画 -->
|
|
|
- <!-- v-if="orderInfo.status == 1" -->
|
|
|
- <view class="charge-loading-box">
|
|
|
+ <view class="charge-loading-box" v-if="deviceInfo.orderStatus == 2">
|
|
|
<view class="charge-loading">
|
|
|
<image class="charge-icon" src="../../static/img/charge_loading.svg" mode=""></image>
|
|
|
<view class="c-loading"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 计时器 -->
|
|
|
- <!-- v-if="orderInfo.status == 1" -->
|
|
|
- <view class="timer">
|
|
|
+ <view class="timer" v-if="deviceInfo.orderStatus == 2">
|
|
|
<view class="value">{{ timer.text }}</view>
|
|
|
<view class="name">充电时间</view>
|
|
|
</view>
|
|
|
@@ -50,7 +50,7 @@
|
|
|
<view class="split"></view>
|
|
|
<view class="param">
|
|
|
<view class="name">电压V</view>
|
|
|
- <view class="value">{{ getVolt() || '0' }}</view>
|
|
|
+ <view class="value">{{ deviceInfo.voltage || '0' }}</view>
|
|
|
</view>
|
|
|
<view class="split"></view>
|
|
|
<view class="param">
|
|
|
@@ -60,48 +60,36 @@
|
|
|
<view class="split"></view>
|
|
|
<view class="param">
|
|
|
<view class="name">电量/度</view>
|
|
|
- <view class="value">{{ statInfo.electricity || '0' }}</view>
|
|
|
+ <view class="value">{{ deviceInfo.totalPower || '0' }}</view>
|
|
|
</view>
|
|
|
<view class="split"></view>
|
|
|
<view class="param">
|
|
|
<view class="name">费用/元</view>
|
|
|
- <view class="value">{{ statInfo.cost || '0' }}</view>
|
|
|
+ <view class="value">{{ deviceInfo.totalMoney || '0' }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="end-charge-box">
|
|
|
<button @click="exiting.visible = true" :disabled="!isShowBtn" class="end-charge">结束充电</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 统计兰 -->
|
|
|
- <!-- <view class="statbar">
|
|
|
- <view class="sta">
|
|
|
- <view class="value">{{statInfo.electricity}}</view>
|
|
|
- <view class="name">电量/度</view>
|
|
|
- </view>
|
|
|
- <view class="split"></view>
|
|
|
- <view class="sta">
|
|
|
- <view class="value">{{statInfo.cost}}</view>
|
|
|
- <view class="name">费用/元</view>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
<!-- 信息 -->
|
|
|
<view id="info" class="info">
|
|
|
<view>
|
|
|
<view class="cell">
|
|
|
<view class="lable">订单编号</view>
|
|
|
- <view class="contet">{{ orderInfo.id }}</view>
|
|
|
+ <view class="contet">{{ deviceInfo.chargeOrderNo }}</view>
|
|
|
</view>
|
|
|
<view class="cell">
|
|
|
<view class="lable">终端编号</view>
|
|
|
- <view class="contet">{{ deviceInfo.deviceNo }}</view>
|
|
|
+ <view class="contet">{{ deviceInfo.connectorCode }}</view>
|
|
|
</view>
|
|
|
<view class="cell">
|
|
|
<view class="lable">充电电站</view>
|
|
|
- <view class="contet">{{ deviceInfo.thirdPartyStationName }}</view>
|
|
|
+ <view class="contet">{{ deviceInfo.stationName }}</view>
|
|
|
</view>
|
|
|
<view class="cell">
|
|
|
<view class="lable">充电终端</view>
|
|
|
- <view class="contet">{{ deviceInfo.deviceName }}</view>
|
|
|
+ <view class="contet">{{ deviceInfo.connectorName }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="tips">账单信息可能会有所延迟,具体以实际结算为准</view>
|
|
|
@@ -123,7 +111,7 @@ export default {
|
|
|
},
|
|
|
onShow() {
|
|
|
this.getDeviceInfo();
|
|
|
- this.getOrderInfo();
|
|
|
+ // this.getOrderInfo();
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -137,16 +125,7 @@ export default {
|
|
|
text: '00:00:00',
|
|
|
isSatrt: false,
|
|
|
},
|
|
|
- orderTimer: {
|
|
|
- id: 0,
|
|
|
- isSatrt: false,
|
|
|
- timeInterval: 10, //每隔多少秒查询一次订单(单位秒:s)
|
|
|
- },
|
|
|
- statInfo: {
|
|
|
- electricity: 0,
|
|
|
- cost: 0
|
|
|
- }, //统计信息,电量,费用
|
|
|
- nowPriceTime: {}, //当前价格时间段信息
|
|
|
+ pollingTimer: null, //轮询定时器ID
|
|
|
deviceInfo: {}, //充电桩的信息
|
|
|
orderInfo: {
|
|
|
id: 1
|
|
|
@@ -157,92 +136,67 @@ export default {
|
|
|
destroyed() {
|
|
|
console.log("关闭页面了。。。。。。")
|
|
|
//关闭页面了,要清除定时器
|
|
|
+ this.stopPolling();
|
|
|
clearInterval(this.timer.id);
|
|
|
- clearInterval(this.orderTimer.id);
|
|
|
},
|
|
|
methods: {
|
|
|
- //获取设备的详情信息
|
|
|
- getDeviceInfo(deviceId) {
|
|
|
- this.$api.base("post", "/chargeApi/getDevicesDetial", {
|
|
|
- "deviceId": this.deviceInfo.id
|
|
|
- }, {}).then(res => {
|
|
|
- this.deviceInfo = res.device;
|
|
|
- this.nowPriceTime = res.nowPriceTime;
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- //是否显示长按结束按钮
|
|
|
- isShowEendBtn(orderTime) {
|
|
|
- var t1 = new Date(orderTime).getTime();
|
|
|
- var t2 = new Date().getTime();
|
|
|
- var t = (t2 - t1) / 1000; //单位秒
|
|
|
- if (t >= 60 || this.orderInfo.status == 1) {
|
|
|
- //启动时间大于一分钟,可以显示长按结束按钮
|
|
|
- this.isShowBtn = true;
|
|
|
- }
|
|
|
- },
|
|
|
- //查询订单详情并进行订单状态的检测
|
|
|
- getOrderInfo() {
|
|
|
- this.$api.base("post", "/chargeApi/queryIsSuccessStop", {
|
|
|
- "id": this.orderInfo.id
|
|
|
- }, {
|
|
|
- loading: false
|
|
|
+ //获取设备的详情信息(含轮询)
|
|
|
+ getDeviceInfo(showLoading = true) {
|
|
|
+ this.$api.base("get", "/applet/v1/station/charging-cost", {}, {
|
|
|
+ loading: showLoading
|
|
|
}).then(res => {
|
|
|
- this.orderInfo = res.obj.orderInfo;
|
|
|
- this.timer.start = res.obj.orderInfo.startTime.replaceAll("-", "/");
|
|
|
- this.isShowEendBtn(res.obj.orderInfo.startTime.replaceAll("-", "/"));
|
|
|
- //充电的度数
|
|
|
- if (this.orderInfo.totalCharge != null) {
|
|
|
- this.statInfo.electricity = this.orderInfo.totalCharge;
|
|
|
- }
|
|
|
-
|
|
|
- //费用
|
|
|
- let cost = (this.statInfo.electricity * this.nowPriceTime.price).toFixed(2);
|
|
|
- if (!isNaN(cost) && this.orderInfo.thirdPartyElecfee == 0) {
|
|
|
- //如果后台,第三方返回的电费是0按照自己的方式进行计算
|
|
|
- this.statInfo.cost = cost
|
|
|
- }
|
|
|
- if (!isNaN(this.orderInfo.realCost) && this.orderInfo.thirdPartyElecfee > 0) {
|
|
|
- //如果后台有返回第三方的电费,取后台计算的值
|
|
|
- this.statInfo.cost = this.orderInfo.realCost.toFixed(4);
|
|
|
- }
|
|
|
+ this.deviceInfo = res.data;
|
|
|
|
|
|
- if (this.orderInfo.status == 3 || this.orderInfo.status == 5) {
|
|
|
+ // 检查订单状态,已完成或已结束则跳转订单详情
|
|
|
+ if (res.data.orderStatus == 3 || res.data.orderStatus == 5) {
|
|
|
uni.hideLoading();
|
|
|
+ this.stopPolling();
|
|
|
clearInterval(this.timer.id);
|
|
|
- clearInterval(this.orderTimer.id);
|
|
|
- this.$app.url.goto('/pages/order-detail/order-detail?orderId=' + this.orderInfo.id, false);
|
|
|
+ this.$app.url.goto('/pages/order-detail/order-detail?orderId=' + res.data.chargeOrderId, false);
|
|
|
return;
|
|
|
}
|
|
|
- if (this.orderInfo.status == 1 && !this.timer.isSatrt) {
|
|
|
- //状态为充电中
|
|
|
+
|
|
|
+ // 充电中状态,启动计时器
|
|
|
+ if (res.data.orderStatus == 2 && !this.timer.isSatrt) {
|
|
|
this.startup();
|
|
|
}
|
|
|
- if (!this.orderTimer.isSatrt) {
|
|
|
- this.orderTimer.isSatrt = true;
|
|
|
- //开启定时器每隔5s查询订单
|
|
|
- this.startCheckOrderTimer();
|
|
|
- }
|
|
|
|
|
|
+ // 检查是否显示结束按钮
|
|
|
+ this.checkShowEndBtn(res.data.startTime);
|
|
|
+
|
|
|
+ // 启动轮询
|
|
|
+ this.startPolling();
|
|
|
})
|
|
|
},
|
|
|
- getVolt() {
|
|
|
- if (!this.deviceInfo.power) {
|
|
|
- return 0;
|
|
|
+ //启动轮询定时器,每5秒查询一次
|
|
|
+ startPolling() {
|
|
|
+ if (this.pollingTimer) return; // 已启动则不重复
|
|
|
+ this.pollingTimer = setInterval(() => {
|
|
|
+ this.getDeviceInfo(false);
|
|
|
+ }, 5000);
|
|
|
+ },
|
|
|
+ //停止轮询
|
|
|
+ stopPolling() {
|
|
|
+ if (this.pollingTimer) {
|
|
|
+ clearInterval(this.pollingTimer);
|
|
|
+ this.pollingTimer = null;
|
|
|
}
|
|
|
- var v = this.deviceInfo.power / this.deviceInfo.current * 1000;
|
|
|
- return v;
|
|
|
},
|
|
|
- //启动检测订单的定时器,每隔5S
|
|
|
- startCheckOrderTimer() {
|
|
|
- clearInterval(this.orderTimer.id);
|
|
|
- this.orderTimer.id = setInterval(() => {
|
|
|
- this.getOrderInfo(this.orderInfo.id)
|
|
|
- }, this.orderTimer.timeInterval * 1000);
|
|
|
+ //检查是否显示长按结束按钮
|
|
|
+ checkShowEndBtn(orderTime) {
|
|
|
+ if (!orderTime) return;
|
|
|
+ const t1 = new Date(orderTime.replace(/-/g, '/')).getTime();
|
|
|
+ const t2 = Date.now();
|
|
|
+ const diffSeconds = (t2 - t1) / 1000;
|
|
|
+ // 启动时间大于60秒或状态为充电中,显示结束按钮
|
|
|
+ if (diffSeconds >= 60 || this.deviceInfo.orderStatus == 2) {
|
|
|
+ this.isShowBtn = true;
|
|
|
+ }
|
|
|
},
|
|
|
// 启动定时器
|
|
|
startup() {
|
|
|
- const start = new Date(this.timer.start);
|
|
|
+ // 使用 this.deviceInfo.startTime 替代 this.timer.start
|
|
|
+ const start = new Date(this.deviceInfo.startTime);
|
|
|
const obj = {
|
|
|
hour: 0,
|
|
|
minute: 0,
|
|
|
@@ -256,16 +210,6 @@ export default {
|
|
|
obj.second = Math.floor(diff / 1000 % 60);
|
|
|
this.timer.text =
|
|
|
`${String(obj.hour).padStart(2, '0')}:${String(obj.minute).padStart(2, '0')}:${String(obj.second).padStart(2, '0')}`;
|
|
|
- //console.log(diff,Math.floor(diff / 1000 ))
|
|
|
- /* //计算在该功率下,
|
|
|
- var mill = diff / 1000;//充电时间秒
|
|
|
- if(!this.deviceInfo.power){
|
|
|
- return;
|
|
|
- }
|
|
|
- //充电的度数
|
|
|
- this.statInfo.electricity = (this.deviceInfo.power/3600 * mill).toFixed(2);
|
|
|
- //费用
|
|
|
- this.statInfo.cost = (this.statInfo.electricity * this.nowPriceTime.price).toFixed(2); */
|
|
|
}
|
|
|
clearInterval(this.timer.id);
|
|
|
this.timer.id = setInterval(handle, 1000);
|
|
|
@@ -273,26 +217,24 @@ export default {
|
|
|
},
|
|
|
// 退出充电
|
|
|
exit() {
|
|
|
- /* this.$app.popup.toast("测试环境,请等待自动结束")
|
|
|
- return; */
|
|
|
this.$api.base("post", "/applet/v1/charge/stopCharge", {
|
|
|
- "chargeOrderId": 1234
|
|
|
+ "chargeOrderNo": this.deviceInfo.chargeOrderNo
|
|
|
}, {}).then(res => {
|
|
|
this.exiting.lock = false;
|
|
|
- clearInterval(this.orderTimer.id);
|
|
|
- this.orderTimer.isSatrt = false;
|
|
|
- this.orderTimer.timeInterval = 2;
|
|
|
+ this.stopPolling();
|
|
|
+
|
|
|
+ // 显示结算中loading
|
|
|
this.$app.popup.loading(true, {
|
|
|
title: "结算中,请稍候",
|
|
|
timeout: 120 * 1000
|
|
|
- })
|
|
|
- setTimeout(() => {
|
|
|
- this.getOrderInfo(this.orderInfo.id)
|
|
|
- }, 2000)
|
|
|
+ });
|
|
|
|
|
|
- /* clearInterval(this.timer.id);
|
|
|
- clearInterval(this.orderTimer.id);
|
|
|
- this.$app.url.goto('/pages/order-detail/order-detail?orderId='+this.orderInfo.id,false); */
|
|
|
+ // 2秒后开始轮询查询订单状态
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getDeviceInfo(false);
|
|
|
+ }, 2000);
|
|
|
+ }).catch(() => {
|
|
|
+ this.exiting.lock = false;
|
|
|
})
|
|
|
},
|
|
|
// 长按动画结束
|