mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-05-04 10:00:11 +08:00
380 lines
15 KiB
Vue
380 lines
15 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card class="cardStyle" v-if="orderInfo[0].orderStatus === '4' || orderInfo[0].orderStatus === '2'">
|
||
<div style="margin: 10px">
|
||
<span style="color: #bf1c1c">该笔订单为异常状态，请检查充电桩状态！</span>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="dialogVisible = true">手动结算</el-button>
|
||
</div>
|
||
|
||
<el-dialog
|
||
title="提示"
|
||
:visible.sync="dialogVisible"
|
||
width="35%"
|
||
>
|
||
<span>平台收到充电桩传来的最后一次实时监测数据<br/></span>
|
||
|
||
<el-table style="width: 100%" :data="monitorDataList" border>
|
||
<el-table-column prop="dateTime" label="时间" align="center"/>
|
||
<el-table-column prop="chargingAmount" label="消费金额" align="center"/>
|
||
<el-table-column prop="chargingDegree" label="充电度数" align="center"/>
|
||
</el-table>
|
||
|
||
<el-divider>下面可以输入自定义消费金额和充电度数</el-divider>
|
||
|
||
<div style="display:flex;justify-content:center;">
|
||
<el-form :model="manualSettlementParam">
|
||
<el-form-item label="消费金额:" prop="chargingAmount" label-width="80px">
|
||
<el-input-number v-model.number="manualSettlementParam.chargingAmount" :precision="2" :controls="false"
|
||
style="width: 50%"/>
|
||
</el-form-item>
|
||
<el-form-item label="充电度数:" prop="chargingDegree" label-width="80px">
|
||
<el-input-number v-model.number="manualSettlementParam.chargingDegree" :precision="2" :controls="false"
|
||
style="width: 50%"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="confirmManualSettlement">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</el-card>
|
||
<!-- 进度条-->
|
||
<el-card class="cardStyle">
|
||
<div style="margin: 30px">
|
||
<div
|
||
style="text-align: center; margin-bottom: 30px"
|
||
v-if="
|
||
orderInfo[0].orderStatus === '4' ||
|
||
orderInfo[0].orderStatus === '6'
|
||
"
|
||
>
|
||
停止理由：
|
||
<span style="color: red">{{ orderInfo[0].stopReasonMsg }}</span>
|
||
</div>
|
||
<el-steps
|
||
:active="orderInfo[0].orderStatus !== '6' ? 2 : 4"
|
||
align-center
|
||
finish-status="success"
|
||
>
|
||
<el-step
|
||
title="客户下单"
|
||
:description="orderInfo[0].createTime"
|
||
></el-step>
|
||
<el-step
|
||
title="开始充电"
|
||
:description="orderInfo[0].orderStatusDescribe"
|
||
></el-step>
|
||
<el-step
|
||
title="结束充电"
|
||
:description="orderInfo[0].endTime"
|
||
></el-step>
|
||
<el-step title="完成充电" description="充电时长"></el-step>
|
||
</el-steps>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 订单信息 -->
|
||
<el-card class="cardStyle">
|
||
<h3>订单信息</h3>
|
||
<el-table style="width: 100%" :data="orderInfo" border>
|
||
<el-table-column prop="orderCode" label="订单号" align="center" width="280"/>
|
||
<el-table-column prop="transactionCode" label="交易流水号" align="center" width="280"/>
|
||
<el-table-column prop="logicCard" label="卡号" align="center" width="280"/>
|
||
<el-table-column prop="orderStatusDescribe" label="订单状态描述" align="center"/>
|
||
<el-table-column prop="createTime" label="创建时间" align="center"/>
|
||
<el-table-column prop="startTime" label="开始时间" align="center"/>
|
||
<el-table-column prop="endTime" label="结束时间" align="center"/>
|
||
<el-table-column prop="startSOC" label="起始SOC" align="center"/>
|
||
<el-table-column prop="endSOC" label="终止SOC" align="center"/>
|
||
<el-table-column prop="stopReasonMsg" label="订单停止原因" align="center"/>
|
||
</el-table>
|
||
<div class="marginTop"></div>
|
||
</el-card>
|
||
|
||
<!-- 收费明细 -->
|
||
<!-- <el-card class="cardStyle">
|
||
<h3>收费明细</h3>
|
||
<el-table style="width: 100%" :data="orderDetail" border>
|
||
<el-table-column prop="totalUsedElectricity" label="总用电量" align="center"/>
|
||
<el-table-column prop="totalOrderAmount" label="订单总金额" align="center"/>
|
||
<el-table-column prop="totalElectricityAmount" label="电费总金额" align="center"/>
|
||
<el-table-column prop="totalServiceAmount" label="服务费总金额" align="center"/>
|
||
|
||
<el-table-column prop="sharpUsedElectricity" label="尖时段用电量" align="center"/>
|
||
<el-table-column prop="sharpElectricityPrice" label="尖时段电费单价" align="center"/>
|
||
<el-table-column prop="sharpServicePrice" label="尖时段服务费单价" align="center"/>
|
||
|
||
<el-table-column prop="peakUsedElectricity" label="峰时段用电量" align="center"/>
|
||
<el-table-column prop="peakElectricityPrice" label="峰时段电费单价" align="center"/>
|
||
<el-table-column prop="peakServicePrice" label="峰时段服务费单价" align="center"/>
|
||
|
||
<el-table-column prop="flatUsedElectricity" label="平时段用电量" align="center"/>
|
||
<el-table-column prop="flatElectricityPrice" label="平时段电费单价" align="center"/>
|
||
<el-table-column prop="flatServicePrice" label="平时段服务费单价" align="center"/>
|
||
|
||
<el-table-column prop="valleyUsedElectricity" label="谷时段用电量" align="center"/>
|
||
<el-table-column prop="valleyElectricityPrice" label="谷时段电费单价" align="center"/>
|
||
<el-table-column prop="valleyServicePrice" label="谷时段服务费单价" align="center"/>
|
||
</el-table>
|
||
<div class="marginTop"></div>
|
||
</el-card>-->
|
||
|
||
<el-card class="cardStyle">
|
||
<h3>收费明细</h3>
|
||
<el-table :data="tableData" border show-summary :summary-method="getSummaries">
|
||
<el-table-column prop="periodType" label="时段类型" width="180" align="center"/>
|
||
<el-table-column prop="electricityPrice" label="电费单价(元/千瓦时)" align="center"/>
|
||
<el-table-column prop="servicePrice" label="服务费单价(元/千瓦时)" align="center"/>
|
||
<el-table-column prop="usedElectricity" label="用电量(千瓦时)" align="center"/>
|
||
<el-table-column prop="electricityAmount" label="电费金额(元)" align="center"/>
|
||
<el-table-column prop="serviceAmount" label="服务费金额(元)" align="center"/>
|
||
</el-table>
|
||
<div class="marginTop"></div>
|
||
</el-card>
|
||
|
||
<el-card class="cardStyle">
|
||
<h3>实时订单数据</h3>
|
||
<el-table style="width: 100%" :data="orderRealTimeInfo" border>
|
||
<el-table-column prop="orderAmount" label="消费金额" align="center" width="280">
|
||
<template slot-scope="scope">
|
||
<span>￥{{
|
||
scope.row.orderAmount === "0.0000" ? "0" : scope.row.orderAmount
|
||
}} </span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="chargedDegree" label="充电度数" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{
|
||
scope.row.chargedDegree === "0.0000" ? "0" : scope.row.chargedDegree
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="chargingTime" label="充电时长" align="center"/>
|
||
<el-table-column prop="soc" label="当前soc" align="center"/>
|
||
</el-table>
|
||
<div class="marginTop"></div>
|
||
</el-card>
|
||
|
||
<!-- 支付信息-->
|
||
<el-card class="cardStyle">
|
||
<h3>支付信息</h3>
|
||
<el-table style="width: 100%" :data="payDetail" border>
|
||
<el-table-column prop="payAmount" label="支付金额" align="center"/>
|
||
<el-table-column prop="payModeDesc" label="支付方式" align="center"/>
|
||
<el-table-column prop="payStatus" label="支付状态" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{
|
||
scope.row.payStatus === "1" ? "支付完成" : "待支付"
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="payTime" label="支付时间" align="center"/>
|
||
<el-table-column prop="outTradeNo" label="支付流水号" align="center"/>
|
||
<el-table-column prop="refundAmount" label="退款金额" align="center"/>
|
||
</el-table>
|
||
<div class="marginTop"></div>
|
||
</el-card>
|
||
|
||
<!-- 退款信息 -->
|
||
<el-card class="cardStyle">
|
||
<div style="margin: 12px 0">
|
||
<span>退款信息</span>
|
||
<el-button icon="el-icon-refresh-right"
|
||
style="float: right; padding: 3px 0"
|
||
type="text"
|
||
@click="retryRefundOrder"
|
||
v-if="retryRefundFlag"
|
||
>
|
||
重试退款
|
||
</el-button>
|
||
</div>
|
||
<el-table style="width: 100%" :data="orderRefundInfoList" border>
|
||
<el-table-column prop="paymentId" label="支付流水号" align="center"/>
|
||
<el-table-column prop="reverseId" label="退款流水号" align="center"/>
|
||
<el-table-column prop="reverseAmt" label="退款金额" align="center"/>
|
||
<el-table-column prop="createdTime" label="退款申请时间" align="center"/>
|
||
<el-table-column prop="succeedTime" label="退款成功时间" align="center"/>
|
||
</el-table>
|
||
<div class="marginTop"></div>
|
||
</el-card>
|
||
|
||
<!-- 设备信息 -->
|
||
<el-card class="cardStyle">
|
||
<h3>设备信息</h3>
|
||
<el-table style="width: 100%" :data="pileIn" border>
|
||
<el-table-column prop="merchantName" label="运营商名称" align="center"/>
|
||
<el-table-column prop="pileSn" label="设备编号" align="center"/>
|
||
<el-table-column prop="ratedCurrent" label="额定电流(A)" align="center"/>
|
||
<el-table-column prop="ratedVoltage" label="额定电压(V)" align="center"/>
|
||
<el-table-column prop="ratedPower" label="额定功率(KW)" align="center"/>
|
||
</el-table>
|
||
<div class="marginTop"></div>
|
||
</el-card>
|
||
|
||
<!-- 用户信息 -->
|
||
<el-card class="cardStyle">
|
||
<h3>用户信息</h3>
|
||
<el-table style="width: 100%" :data="userInfo" border>
|
||
<el-table-column prop="nickName" label="用户昵称" align="center">
|
||
<template slot-scope="scope">
|
||
<router-link
|
||
:to="'/member/detail/index/'+scope.row.memberId"
|
||
class="link-type"
|
||
>
|
||
<span>{{ scope.row.nickName }}</span>
|
||
</router-link>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="mobileNumber" label="用户手机号" align="center"/>
|
||
<el-table-column prop="principalBalance" label="本金金额" align="center"/>
|
||
<!-- <el-table-column prop="giftBalance" label="赠送金额" align="center"/>-->
|
||
<el-table-column prop="totalAccountAmount" label="总金额" align="center"/>
|
||
</el-table>
|
||
<div class="marginTop"></div>
|
||
</el-card>
|
||
<!-- 时间 描述-->
|
||
<el-card
|
||
class="cardStyle"
|
||
v-if="
|
||
orderInfo[0].orderStatus === '1' || orderInfo[0].orderStatus === '6'
|
||
"
|
||
>
|
||
<div class="marginTop"></div>
|
||
<order-echarts :obj="obj"></order-echarts>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {getOrder, manualSettlementOrder, retryRefundOrder} from "@/api/order/order";
|
||
import OrderEcharts from "@/views/order/order/orderEcharts";
|
||
|
||
export default {
|
||
name: "",
|
||
components: {OrderEcharts},
|
||
data() {
|
||
return {
|
||
orderCode: this.$route.params.orderCode,
|
||
orderInfo: [],
|
||
payDetail: [],
|
||
// 订单退款列表
|
||
orderRefundInfoList: [],
|
||
// 重试退款按钮
|
||
retryRefundFlag: false,
|
||
userInfo: [],
|
||
obj: {},
|
||
orderDetail: [],
|
||
pileIn: [],
|
||
orderRealTimeInfo: null,
|
||
// 手动结算对话框Visible
|
||
dialogVisible: false,
|
||
// 最后一次实时监测数据
|
||
lastMonitorData: {},
|
||
// monitorDataList: [this.lastMonitorData],
|
||
// 手动结算参数
|
||
manualSettlementParam: {
|
||
orderCode: null,
|
||
chargingAmount: null,
|
||
chargingDegree: null,
|
||
},
|
||
tableData: []
|
||
};
|
||
},
|
||
created() {
|
||
this.getOrderDetail();
|
||
},
|
||
methods: {
|
||
getSummaries(param) {
|
||
const {columns, data} = param;
|
||
const sums = [];
|
||
columns.forEach((column, index) => {
|
||
if (index === 0) {
|
||
sums[index] = '合计';
|
||
return;
|
||
}
|
||
const values = data.map(item => Number(item[column.property]));
|
||
if (column.property === 'usedElectricity' || column.property === 'electricityAmount' || column.property === 'serviceAmount') {
|
||
sums[index] = values.reduce((prev, curr) => {
|
||
const value = Number(curr);
|
||
if (!isNaN(value)) {
|
||
return prev + curr;
|
||
} else {
|
||
return prev;
|
||
}
|
||
}, 0);
|
||
}
|
||
});
|
||
return sums;
|
||
},
|
||
clickManualSettlement() {
|
||
this.dialogVisible = true;
|
||
},
|
||
|
||
// 重试退款方法
|
||
retryRefundOrder() {
|
||
console.log("点击重试退款按钮");
|
||
alert("重试退款功能未完成");
|
||
var param = {
|
||
orderCode: this.orderCode
|
||
};
|
||
retryRefundOrder(param).then(response => {
|
||
this.getOrderDetail();
|
||
});
|
||
},
|
||
confirmManualSettlement() {
|
||
if (this.manualSettlementParam.chargingAmount == null) {
|
||
return false;
|
||
}
|
||
if (this.manualSettlementParam.chargingDegree == null) {
|
||
return false;
|
||
}
|
||
this.manualSettlementParam.orderCode = this.orderInfo[0].orderCode;
|
||
console.log("确认手动结算订单param:", this.manualSettlementParam);
|
||
manualSettlementOrder(this.manualSettlementParam).then(response => {
|
||
this.dialogVisible = false;
|
||
this.getOrderDetail();
|
||
})
|
||
},
|
||
async getOrderDetail() {
|
||
const {data} = await getOrder(this.orderCode);
|
||
// console.log("getOrder", data);
|
||
this.obj = data;
|
||
this.orderInfo = [data.orderInfo];
|
||
// console.log("this.orderInfo", this.orderDetail);
|
||
this.payDetail = data.payRecordList;
|
||
// console.log("this.payDetail", this.payDetail);
|
||
this.orderRefundInfoList = data.orderRefundInfoList;
|
||
this.userInfo = [data.memberInfo];
|
||
// console.log("this.userInfo", this.userInfo);
|
||
this.pileIn = [data.pileInfo];
|
||
// console.log("this.pileIn", this.pileIn);
|
||
this.orderRealTimeInfo = [data.orderRealTimeInfo];
|
||
this.orderDetail = [data.billingDetails];
|
||
this.tableData = data.chargeDetails;
|
||
this.lastMonitorData = data.lastMonitorData;
|
||
|
||
// 是否显示重试退款按钮
|
||
if (data.orderInfo.orderStatus === '6' && data.payRecordList[0].payMode === '4' && data.orderRefundInfoList.length === 0) {
|
||
this.retryRefundFlag = true;
|
||
}
|
||
},
|
||
},
|
||
computed: {
|
||
// 一个计算属性的 getter
|
||
monitorDataList() {
|
||
return [this.lastMonitorData];
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
.cardStyle {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.marginTop {
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|