autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-07-04 05:58:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

订单详情显示车牌号

Browse Source
This commit is contained in:
BOOL\25024
2024-09-11 13:53:41 +08:00
parent 6e56f0a5a8
commit ce6d933128
1 changed files with 459 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
jsowell-ui/src/views/order/order/orderDetail.vue
View File

@@ -1,19 +1,32 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-card class="cardStyle" v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '2'"> <el-card
class="cardStyle"
v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '2'"
>
<div style="margin: 10px"> <div style="margin: 10px">
<span style="color: #bf1c1c" v-if="orderInfo.orderStatus === '4'">该笔订单为异常状态，请检查充电桩状态！</span> <span style="color: #bf1c1c" v-if="orderInfo.orderStatus === '4'"
<span style="color: #bf1c1c" v-if="orderInfo.orderStatus === '2'">该笔订单为待结算状态，如有需要可以手动结算订单！</span> >该笔订单为异常状态，请检查充电桩状态！</span
<el-button type="primary" icon="el-icon-search" size="mini" @click="dialogVisible = true">手动结算</el-button> >
<span style="color: #bf1c1c" v-if="orderInfo.orderStatus === '2'"
>该笔订单为待结算状态，如有需要可以手动结算订单！</span
>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="dialogVisible = true"
>手动结算</el-button
>
</div> </div>
<el-dialog title="提示" :visible.sync="dialogVisible" width="35%"> <el-dialog title="提示" :visible.sync="dialogVisible" width="35%">
<span>平台收到充电桩传来的最后一次实时监测数据<br/></span> <span>平台收到充电桩传来的最后一次实时监测数据<br /></span>
<el-table style="width: 100%" :data="monitorDataList" border> <el-table style="width: 100%" :data="monitorDataList" border>
<el-table-column prop="dateTime" label="时间" align="center"/> <el-table-column prop="dateTime" label="时间" align="center" />
<el-table-column prop="chargingAmount" label="消费金额" align="center"/> <el-table-column prop="chargingAmount" label="消费金额" align="center" />
<el-table-column prop="chargingDegree" label="充电度数" align="center"/> <el-table-column prop="chargingDegree" label="充电度数" align="center" />
</el-table> </el-table>
<el-divider>下面可以输入自定义消费金额和充电度数</el-divider> <el-divider>下面可以输入自定义消费金额和充电度数</el-divider>
@@ -21,14 +34,20 @@
<div style="display: flex; justify-content: center"> <div style="display: flex; justify-content: center">
<el-form :model="manualSettlementParam"> <el-form :model="manualSettlementParam">
<el-form-item label="消费金额:" prop="chargingAmount" label-width="80px"> <el-form-item label="消费金额:" prop="chargingAmount" label-width="80px">
<el-input-number v-model.number="manualSettlementParam.chargingAmount" :precision="2" <el-input-number
v-model.number="manualSettlementParam.chargingAmount"
:precision="2"
:controls="false" :controls="false"
style="width: 50%"/> style="width: 50%"
/>
</el-form-item> </el-form-item>
<el-form-item label="充电度数:" prop="chargingDegree" label-width="80px"> <el-form-item label="充电度数:" prop="chargingDegree" label-width="80px">
<el-input-number v-model.number="manualSettlementParam.chargingDegree" :precision="2" <el-input-number
v-model.number="manualSettlementParam.chargingDegree"
:precision="2"
:controls="false" :controls="false"
style="width: 50%"/> style="width: 50%"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
@@ -41,14 +60,23 @@
<!-- 进度条--> <!-- 进度条-->
<el-card class="cardStyle"> <el-card class="cardStyle">
<div style="margin: 30px"> <div style="margin: 30px">
<div style="text-align: center; margin-bottom: 30px" <div
v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '6'"> style="text-align: center; margin-bottom: 30px"
v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '6'"
>
停止理由： 停止理由：
<span style="color: red">{{ orderInfo.stopReasonMsg }}</span> <span style="color: red">{{ orderInfo.stopReasonMsg }}</span>
</div> </div>
<el-steps :active="orderInfo.orderStatus !== '6' ? 2 : 4" align-center finish-status="success"> <el-steps
:active="orderInfo.orderStatus !== '6' ? 2 : 4"
align-center
finish-status="success"
>
<el-step title="客户下单" :description="orderInfo.createTime"></el-step> <el-step title="客户下单" :description="orderInfo.createTime"></el-step>
<el-step title="开始充电" :description="orderInfo.orderStatusDescribe"></el-step> <el-step
title="开始充电"
:description="orderInfo.orderStatusDescribe"
></el-step>
<el-step title="结束充电" :description="orderInfo.endTime"></el-step> <el-step title="结束充电" :description="orderInfo.endTime"></el-step>
<el-step title="完成充电" description="充电时长"></el-step> <el-step title="完成充电" description="充电时长"></el-step>
</el-steps> </el-steps>
@@ -58,64 +86,56 @@
<!-- 订单信息 --> <!-- 订单信息 -->
<el-card class="cardStyle"> <el-card class="cardStyle">
<h3>订单信息</h3> <h3>订单信息</h3>
<el-descriptions direction="vertical" :column="11" border :contentStyle="CS" :label-style="LS"> <el-descriptions
<el-descriptions-item label="订单号">{{ direction="vertical"
orderInfo.orderCode :column="11"
}} border
:contentStyle="CS"
:label-style="LS"
>
<el-descriptions-item label="订单号"
>{{ orderInfo.orderCode }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="交易流水号">{{ <el-descriptions-item label="交易流水号"
orderInfo.transactionCode >{{ orderInfo.transactionCode }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="卡号">{{ <el-descriptions-item label="卡号"
orderInfo.logicCard >{{ orderInfo.logicCard }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="vin码">{{ <el-descriptions-item label="vin码"
orderInfo.vinCode >{{ orderInfo.vinCode }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="订单状态描述">{{ <el-descriptions-item label="订单状态描述"
orderInfo.orderStatusDescribe >{{ orderInfo.orderStatusDescribe }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="充电开始时间">{{ <el-descriptions-item label="充电开始时间"
orderInfo.startTime >{{ orderInfo.startTime }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="充电结束时间">{{ <el-descriptions-item label="充电结束时间"
orderInfo.endTime >{{ orderInfo.endTime }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="订单创建时间">{{ <el-descriptions-item label="订单创建时间"
orderInfo.createTime >{{ orderInfo.createTime }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="订单优惠金额">{{ <el-descriptions-item label="订单优惠金额"
orderInfo.discountAmount >{{ orderInfo.discountAmount }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="订单结算金额">{{ <el-descriptions-item label="订单结算金额"
orderInfo.settleAmount >{{ orderInfo.settleAmount }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="订单结算时间">{{ <el-descriptions-item label="订单结算时间"
orderInfo.settlementTime >{{ orderInfo.settlementTime }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="起始SOC">{{ <el-descriptions-item label="起始SOC"
orderInfo.startSOC >{{ orderInfo.startSOC }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="终止SOC">{{ <el-descriptions-item label="终止SOC"
orderInfo.endSOC >{{ orderInfo.endSOC }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="订单停止原因">{{ <el-descriptions-item label="订单停止原因"
orderInfo.stopReasonMsg >{{ orderInfo.stopReasonMsg }}
}}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<div class="marginTop"></div> <div class="marginTop"></div>
@@ -124,12 +144,20 @@
<el-card class="cardStyle"> <el-card class="cardStyle">
<h3>收费明细</h3> <h3>收费明细</h3>
<el-table :data="tableData" border show-summary :summary-method="getSummaries"> <el-table :data="tableData" border show-summary :summary-method="getSummaries">
<el-table-column prop="periodType" label="时段类型" width="180" align="center"/> <el-table-column prop="periodType" label="时段类型" width="180" align="center" />
<el-table-column prop="electricityPrice" label="电费单价(元/千瓦时)" align="center"/> <el-table-column
<el-table-column prop="servicePrice" label="服务费单价(元/千瓦时)" align="center"/> prop="electricityPrice"
<el-table-column prop="usedElectricity" label="用电量(千瓦时)" align="center"/> label="电费单价(元/千瓦时)"
<el-table-column prop="electricityAmount" label="电费金额(元)" align="center"/> align="center"
<el-table-column prop="serviceAmount" 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> </el-table>
<div class="marginTop"></div> <div class="marginTop"></div>
</el-card> </el-card>
@@ -137,30 +165,35 @@
<!-- 实时订单数据 --> <!-- 实时订单数据 -->
<el-card class="cardStyle"> <el-card class="cardStyle">
<h3>订单计费明细</h3> <h3>订单计费明细</h3>
<el-descriptions direction="vertical" :column="5" border :contentStyle="CS" :label-style="LS"> <el-descriptions
<el-descriptions-item label="时间">{{ direction="vertical"
orderRealTimeInfo.time :column="5"
}} border
:contentStyle="CS"
:label-style="LS"
>
<el-descriptions-item label="时间"
>{{ orderRealTimeInfo.time }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="消费金额">{{ <el-descriptions-item label="消费金额"
>{{
orderRealTimeInfo.orderAmount === "0.0000" orderRealTimeInfo.orderAmount === "0.0000"
? "0" ? "0"
: orderRealTimeInfo.orderAmount : orderRealTimeInfo.orderAmount
}} }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="充电度数">{{ <el-descriptions-item label="充电度数"
>{{
orderRealTimeInfo.chargedDegree === "0.0000" orderRealTimeInfo.chargedDegree === "0.0000"
? "0" ? "0"
: orderRealTimeInfo.chargedDegree : orderRealTimeInfo.chargedDegree
}} }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="充电时长">{{ <el-descriptions-item label="充电时长"
orderRealTimeInfo.chargingTime >{{ orderRealTimeInfo.chargingTime }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="当前soc">{{ <el-descriptions-item label="当前soc"
orderRealTimeInfo.soc >{{ orderRealTimeInfo.soc }}
}}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<div class="marginTop"></div> <div class="marginTop"></div>
@@ -169,27 +202,30 @@
<el-card class="cardStyle"> <el-card class="cardStyle">
<h3>支付信息</h3> <h3>支付信息</h3>
<template v-if="payDetail.length !== 0"> <template v-if="payDetail.length !== 0">
<el-descriptions direction="vertical" :column="6" border :contentStyle="CS" :label-style="LS" <el-descriptions
v-for="(item, index) in payDetail" :key="index"> direction="vertical"
<el-descriptions-item label="支付金额">{{ :column="6"
item.payAmount border
}} :contentStyle="CS"
:label-style="LS"
v-for="(item, index) in payDetail"
:key="index"
>
<el-descriptions-item label="支付金额"
>{{ item.payAmount }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="支付方式">{{ <el-descriptions-item label="支付方式"
item.payModeDesc >{{ item.payModeDesc }}
}}
</el-descriptions-item> </el-descriptions-item>
<!--<el-descriptions-item label="支付状态">{{ <!--<el-descriptions-item label="支付状态">{{
item.payStatus === "1" ? "支付完成" : "待支付" item.payStatus === "1" ? "支付完成" : "待支付"
}} }}
</el-descriptions-item>--> </el-descriptions-item>-->
<el-descriptions-item label="支付时间">{{ <el-descriptions-item label="支付时间"
item.payTime >{{ item.payTime }}
}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="支付流水号">{{ <el-descriptions-item label="支付流水号"
item.outTradeNo >{{ item.outTradeNo }}
}}
</el-descriptions-item> </el-descriptions-item>
<!--<el-descriptions-item label="退款金额">{{ <!--<el-descriptions-item label="退款金额">{{
item.refundAmount item.refundAmount
@@ -204,18 +240,22 @@
<el-card class="cardStyle"> <el-card class="cardStyle">
<div style="margin: 12px 0"> <div style="margin: 12px 0">
<span>退款信息</span> <span>退款信息</span>
<el-button icon="el-icon-refresh-right" style="float: right; padding: 3px 0" type="text" <el-button
icon="el-icon-refresh-right"
style="float: right; padding: 3px 0"
type="text"
@click="retryRefundOrder" @click="retryRefundOrder"
v-if="retryRefundFlag"> v-if="retryRefundFlag"
>
重试退款 重试退款
</el-button> </el-button>
</div> </div>
<el-table style="width: 100%" :data="orderRefundInfoList" border> <el-table style="width: 100%" :data="orderRefundInfoList" border>
<el-table-column prop="paymentId" label="支付流水号" align="center"/> <el-table-column prop="paymentId" label="支付流水号" align="center" />
<el-table-column prop="reverseId" label="退款流水号" align="center"/> <el-table-column prop="reverseId" label="退款流水号" align="center" />
<el-table-column prop="reverseAmt" label="退款金额" align="center"/> <el-table-column prop="reverseAmt" label="退款金额" align="center" />
<el-table-column prop="createdTime" label="退款申请时间" align="center"/> <el-table-column prop="createdTime" label="退款申请时间" align="center" />
<el-table-column prop="succeedTime" label="退款成功时间" align="center"/> <el-table-column prop="succeedTime" label="退款成功时间" align="center" />
</el-table> </el-table>
<div class="marginTop"></div> <div class="marginTop"></div>
</el-card> </el-card>
@@ -224,11 +264,11 @@
<el-card class="cardStyle"> <el-card class="cardStyle">
<h3>设备信息</h3> <h3>设备信息</h3>
<el-table style="width: 100%" :data="pileIn" border> <el-table style="width: 100%" :data="pileIn" border>
<el-table-column prop="merchantName" label="运营商名称" align="center"/> <el-table-column prop="merchantName" label="运营商名称" align="center" />
<el-table-column prop="pileSn" label="设备编号" align="center"/> <el-table-column prop="pileSn" label="设备编号" align="center" />
<el-table-column prop="ratedCurrent" label="额定电流(A)" align="center"/> <el-table-column prop="ratedCurrent" label="额定电流(A)" align="center" />
<el-table-column prop="ratedVoltage" label="额定电压(V)" align="center"/> <el-table-column prop="ratedVoltage" label="额定电压(V)" align="center" />
<el-table-column prop="ratedPower" label="额定功率(KW)" align="center"/> <el-table-column prop="ratedPower" label="额定功率(KW)" align="center" />
</el-table> </el-table>
<div class="marginTop"></div> <div class="marginTop"></div>
</el-card> </el-card>
@@ -239,38 +279,49 @@
<el-table style="width: 100%" :data="userInfo" border> <el-table style="width: 100%" :data="userInfo" border>
<el-table-column prop="nickName" label="用户昵称" align="center"> <el-table-column prop="nickName" label="用户昵称" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<router-link :to="'/member/detail/index/' + scope.row.memberId" class="link-type"> <router-link
:to="'/member/detail/index/' + scope.row.memberId"
class="link-type"
>
<span>{{ scope.row.nickName }}</span> <span>{{ scope.row.nickName }}</span>
</router-link> </router-link>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="memberId" label="会员ID" align="center"/> <el-table-column prop="memberId" label="会员ID" align="center" />
<el-table-column prop="mobileNumber" label="用户手机号" align="center"/> <el-table-column prop="mobileNumber" label="用户手机号" align="center" />
<el-table-column prop="principalBalance" label="本金金额" align="center"/> <el-table-column prop="plateNumberList" label="车牌号" align="center">
<template slot-scope="scope">
<span v-for="(item, index) in scope.row.plateNumberList" :key="index">{{
item
}}</span>
</template>
</el-table-column>
<el-table-column prop="principalBalance" label="本金金额" align="center" />
<!-- <el-table-column prop="giftBalance" label="赠送金额" align="center"/>--> <!-- <el-table-column prop="giftBalance" label="赠送金额" align="center"/>-->
<el-table-column prop="totalAccountAmount" label="总金额" align="center"/> <el-table-column prop="totalAccountAmount" label="总金额" align="center" />
</el-table> </el-table>
<div class="marginTop"></div> <div class="marginTop"></div>
</el-card> </el-card>
<!-- 时间 描述--> <!-- 时间 描述-->
<el-card class="cardStyle" <el-card
v-if="orderInfo.orderStatus === '1' || orderInfo.orderStatus === '6' && obj.realTimeMonitorDataList !== null"> class="cardStyle"
v-if="
orderInfo.orderStatus === '1' ||
(orderInfo.orderStatus === '6' && obj.realTimeMonitorDataList !== null)
"
>
<div class="marginTop"></div> <div class="marginTop"></div>
<order-echarts :obj="obj"></order-echarts> <order-echarts :obj="obj"></order-echarts>
</el-card> </el-card>
</div> </div>
</template> </template>
<script> <script>
import { import { getOrder, manualSettlementOrder, retryRefundOrder } from "@/api/order/order";
getOrder,
manualSettlementOrder,
retryRefundOrder,
} from "@/api/order/order";
import OrderEcharts from "@/views/order/order/orderEcharts"; import OrderEcharts from "@/views/order/order/orderEcharts";
export default { export default {
name: "", name: "",
components: {OrderEcharts}, components: { OrderEcharts },
data() { data() {
return { return {
CS: { CS: {
@@ -320,8 +371,8 @@ export default {
}, },
methods: { methods: {
getSummaries(param) { getSummaries(param) {
console.log(param, '添加调试输出'); console.log(param, "添加调试输出");
const {columns, data} = param; const { columns, data } = param;
// console.log(data, 'data'); // console.log(data, 'data');
const sums = []; const sums = [];
columns.forEach((column, index) => { columns.forEach((column, index) => {
@@ -366,13 +417,13 @@ export default {
if (this.isRequesting) { if (this.isRequesting) {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '手动结算订单已经提交，请勿重复操作', message: "手动结算订单已经提交，请勿重复操作",
type: 'warning' type: "warning",
}); });
return; // 如果正在请求中，则不再继续发送请求 return; // 如果正在请求中，则不再继续发送请求
} }
this.isRequesting = true; this.isRequesting = true;
console.log('点击了手动结算按钮'); console.log("点击了手动结算按钮");
if (this.manualSettlementParam.chargingAmount == null) { if (this.manualSettlementParam.chargingAmount == null) {
return false; return false;
} }
@@ -387,10 +438,10 @@ export default {
}); });
}, },
async getOrderDetail() { async getOrderDetail() {
const {data} = await getOrder(this.orderCode); const { data } = await getOrder(this.orderCode);
console.log("getOrder", data); console.log("getOrder", data);
this.obj = data; this.obj = data;
console.log('统计图是否有数据', this.obj.realTimeMonitorDataList); console.log("统计图是否有数据", this.obj.realTimeMonitorDataList);
this.orderInfo = data.orderInfo; this.orderInfo = data.orderInfo;
this.payDetail = data.payRecordList; // 数组 this.payDetail = data.payRecordList; // 数组
this.orderRefundInfoList = data.orderRefundInfoList; // 数组 this.orderRefundInfoList = data.orderRefundInfoList; // 数组