订单详情显示车牌号

jsowell-ui/src/views/order/order/orderDetail.vue

@@ -1,19 +1,32 @@
 <template>
   <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">
-                <span style="color: #bf1c1c" v-if="orderInfo.orderStatus === '4'">该笔订单为异常状态，请检查充电桩状态！</span>
-                <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>
+        <span style="color: #bf1c1c" v-if="orderInfo.orderStatus === '4'"
+          >该笔订单为异常状态，请检查充电桩状态！</span
+        >
+        <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>
 
       <el-dialog title="提示" :visible.sync="dialogVisible" width="35%">
-                <span>平台收到充电桩传来的最后一次实时监测数据<br/></span>
+        <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-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>
@@ -21,14 +34,20 @@
         <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"
+              <el-input-number
+                v-model.number="manualSettlementParam.chargingAmount"
+                :precision="2"
                 :controls="false"
-                                             style="width: 50%"/>
+                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"
+              <el-input-number
+                v-model.number="manualSettlementParam.chargingDegree"
+                :precision="2"
                 :controls="false"
-                                             style="width: 50%"/>
+                style="width: 50%"
+              />
             </el-form-item>
           </el-form>
         </div>
@@ -41,14 +60,23 @@
     <!-- 进度条-->
     <el-card class="cardStyle">
       <div style="margin: 30px">
-                <div style="text-align: center; margin-bottom: 30px"
-                     v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '6'">
+        <div
+          style="text-align: center; margin-bottom: 30px"
+          v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '6'"
+        >
           停止理由：
           <span style="color: red">{{ orderInfo.stopReasonMsg }}</span>
         </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.orderStatusDescribe"></el-step>
+          <el-step
+            title="开始充电"
+            :description="orderInfo.orderStatusDescribe"
+          ></el-step>
           <el-step title="结束充电" :description="orderInfo.endTime"></el-step>
           <el-step title="完成充电" description="充电时长"></el-step>
         </el-steps>
@@ -58,64 +86,56 @@
     <!--  订单信息  -->
     <el-card class="cardStyle">
       <h3>订单信息</h3>
-            <el-descriptions direction="vertical" :column="11" border :contentStyle="CS" :label-style="LS">
-                <el-descriptions-item label="订单号">{{
-                        orderInfo.orderCode
-                    }}
+      <el-descriptions
+        direction="vertical"
+        :column="11"
+        border
+        :contentStyle="CS"
+        :label-style="LS"
+      >
+        <el-descriptions-item label="订单号"
+          >{{ orderInfo.orderCode }}
         </el-descriptions-item>
-                <el-descriptions-item label="交易流水号">{{
-                        orderInfo.transactionCode
-                    }}
+        <el-descriptions-item label="交易流水号"
+          >{{ orderInfo.transactionCode }}
         </el-descriptions-item>
-                <el-descriptions-item label="卡号">{{
-                        orderInfo.logicCard
-                    }}
+        <el-descriptions-item label="卡号"
+          >{{ orderInfo.logicCard }}
         </el-descriptions-item>
-                <el-descriptions-item label="vin码">{{
-                        orderInfo.vinCode
-                    }}
+        <el-descriptions-item label="vin码"
+          >{{ orderInfo.vinCode }}
         </el-descriptions-item>
-                <el-descriptions-item label="订单状态描述">{{
-                        orderInfo.orderStatusDescribe
-                    }}
+        <el-descriptions-item label="订单状态描述"
+          >{{ orderInfo.orderStatusDescribe }}
         </el-descriptions-item>
-                <el-descriptions-item label="充电开始时间">{{
-                        orderInfo.startTime
-                    }}
+        <el-descriptions-item label="充电开始时间"
+          >{{ orderInfo.startTime }}
         </el-descriptions-item>
-                <el-descriptions-item label="充电结束时间">{{
-                        orderInfo.endTime
-                    }}
+        <el-descriptions-item label="充电结束时间"
+          >{{ orderInfo.endTime }}
         </el-descriptions-item>
-                <el-descriptions-item label="订单创建时间">{{
-                        orderInfo.createTime
-                    }}
+        <el-descriptions-item label="订单创建时间"
+          >{{ orderInfo.createTime }}
         </el-descriptions-item>
-                <el-descriptions-item label="订单优惠金额">{{
-                        orderInfo.discountAmount
-                    }}
+        <el-descriptions-item label="订单优惠金额"
+          >{{ orderInfo.discountAmount }}
         </el-descriptions-item>
-                <el-descriptions-item label="订单结算金额">{{
-                        orderInfo.settleAmount
-                    }}
+        <el-descriptions-item label="订单结算金额"
+          >{{ orderInfo.settleAmount }}
         </el-descriptions-item>
-                <el-descriptions-item label="订单结算时间">{{
-                        orderInfo.settlementTime
-                    }}
+        <el-descriptions-item label="订单结算时间"
+          >{{ orderInfo.settlementTime }}
         </el-descriptions-item>
 
-                <el-descriptions-item label="起始SOC">{{
-                        orderInfo.startSOC
-                    }}
+        <el-descriptions-item label="起始SOC"
+          >{{ orderInfo.startSOC }}
         </el-descriptions-item>
-                <el-descriptions-item label="终止SOC">{{
-                        orderInfo.endSOC
-                    }}
+        <el-descriptions-item label="终止SOC"
+          >{{ orderInfo.endSOC }}
         </el-descriptions-item>
 
-                <el-descriptions-item label="订单停止原因">{{
-                        orderInfo.stopReasonMsg
-                    }}
+        <el-descriptions-item label="订单停止原因"
+          >{{ orderInfo.stopReasonMsg }}
         </el-descriptions-item>
       </el-descriptions>
       <div class="marginTop"></div>
@@ -124,12 +144,20 @@
     <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-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>
@@ -137,30 +165,35 @@
     <!-- 实时订单数据 -->
     <el-card class="cardStyle">
       <h3>订单计费明细</h3>
-            <el-descriptions direction="vertical" :column="5" border :contentStyle="CS" :label-style="LS">
-                <el-descriptions-item label="时间">{{
-                        orderRealTimeInfo.time
-                    }}
+      <el-descriptions
+        direction="vertical"
+        :column="5"
+        border
+        :contentStyle="CS"
+        :label-style="LS"
+      >
+        <el-descriptions-item label="时间"
+          >{{ orderRealTimeInfo.time }}
         </el-descriptions-item>
-                <el-descriptions-item label="消费金额">{{
+        <el-descriptions-item label="消费金额"
+          >{{
             orderRealTimeInfo.orderAmount === "0.0000"
               ? "0"
               : orderRealTimeInfo.orderAmount
           }}
         </el-descriptions-item>
-                <el-descriptions-item label="充电度数">{{
+        <el-descriptions-item label="充电度数"
+          >{{
             orderRealTimeInfo.chargedDegree === "0.0000"
               ? "0"
               : orderRealTimeInfo.chargedDegree
           }}
         </el-descriptions-item>
-                <el-descriptions-item label="充电时长">{{
-                        orderRealTimeInfo.chargingTime
-                    }}
+        <el-descriptions-item label="充电时长"
+          >{{ orderRealTimeInfo.chargingTime }}
         </el-descriptions-item>
-                <el-descriptions-item label="当前soc">{{
-                        orderRealTimeInfo.soc
-                    }}
+        <el-descriptions-item label="当前soc"
+          >{{ orderRealTimeInfo.soc }}
         </el-descriptions-item>
       </el-descriptions>
       <div class="marginTop"></div>
@@ -169,27 +202,30 @@
     <el-card class="cardStyle">
       <h3>支付信息</h3>
       <template v-if="payDetail.length !== 0">
-                <el-descriptions direction="vertical" :column="6" border :contentStyle="CS" :label-style="LS"
-                                 v-for="(item, index) in payDetail" :key="index">
-                    <el-descriptions-item label="支付金额">{{
-                            item.payAmount
-                        }}
+        <el-descriptions
+          direction="vertical"
+          :column="6"
+          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 label="支付方式">{{
-                            item.payModeDesc
-                        }}
+          <el-descriptions-item label="支付方式"
+            >{{ item.payModeDesc }}
           </el-descriptions-item>
           <!--<el-descriptions-item label="支付状态">{{
                       item.payStatus === "1" ? "支付完成" : "待支付"
                     }}
                     </el-descriptions-item>-->
-                    <el-descriptions-item label="支付时间">{{
-                            item.payTime
-                        }}
+          <el-descriptions-item label="支付时间"
+            >{{ item.payTime }}
           </el-descriptions-item>
-                    <el-descriptions-item label="支付流水号">{{
-                            item.outTradeNo
-                        }}
+          <el-descriptions-item label="支付流水号"
+            >{{ item.outTradeNo }}
           </el-descriptions-item>
           <!--<el-descriptions-item label="退款金额">{{
                             item.refundAmount
@@ -204,18 +240,22 @@
     <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"
+        <el-button
+          icon="el-icon-refresh-right"
+          style="float: right; padding: 3px 0"
+          type="text"
           @click="retryRefundOrder"
-                           v-if="retryRefundFlag">
+          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-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>
@@ -224,11 +264,11 @@
     <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-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>
@@ -239,38 +279,49 @@
       <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">
+            <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="memberId" label="会员ID" align="center"/>
-                <el-table-column prop="mobileNumber" label="用户手机号" align="center"/>
-                <el-table-column prop="principalBalance" label="本金金额" align="center"/>
+        <el-table-column prop="memberId" label="会员ID" align="center" />
+        <el-table-column prop="mobileNumber" 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="totalAccountAmount" 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.orderStatus === '1' || orderInfo.orderStatus === '6' && obj.realTimeMonitorDataList !== null">
+    <el-card
+      class="cardStyle"
+      v-if="
+        orderInfo.orderStatus === '1' ||
+        (orderInfo.orderStatus === '6' && obj.realTimeMonitorDataList !== null)
+      "
+    >
       <div class="marginTop"></div>
       <order-echarts :obj="obj"></order-echarts>
     </el-card>
   </div>
 </template>
 <script>
-import {
-    getOrder,
-    manualSettlementOrder,
-    retryRefundOrder,
-} from "@/api/order/order";
+import { getOrder, manualSettlementOrder, retryRefundOrder } from "@/api/order/order";
 import OrderEcharts from "@/views/order/order/orderEcharts";
 
 export default {
   name: "",
-    components: {OrderEcharts},
+  components: { OrderEcharts },
   data() {
     return {
       CS: {
@@ -320,8 +371,8 @@ export default {
   },
   methods: {
     getSummaries(param) {
-            console.log(param, '添加调试输出');
-            const {columns, data} = param;
+      console.log(param, "添加调试输出");
+      const { columns, data } = param;
       // console.log(data, 'data');
       const sums = [];
       columns.forEach((column, index) => {
@@ -366,13 +417,13 @@ export default {
       if (this.isRequesting) {
         this.$message({
           showClose: true,
-                    message: '手动结算订单已经提交，请勿重复操作',
-                    type: 'warning'
+          message: "手动结算订单已经提交，请勿重复操作",
+          type: "warning",
         });
         return; // 如果正在请求中，则不再继续发送请求
       }
       this.isRequesting = true;
-            console.log('点击了手动结算按钮');
+      console.log("点击了手动结算按钮");
       if (this.manualSettlementParam.chargingAmount == null) {
         return false;
       }
@@ -387,10 +438,10 @@ export default {
       });
     },
     async getOrderDetail() {
-            const {data} = await getOrder(this.orderCode);
+      const { data } = await getOrder(this.orderCode);
       console.log("getOrder", data);
       this.obj = data;
-            console.log('统计图是否有数据', this.obj.realTimeMonitorDataList);
+      console.log("统计图是否有数据", this.obj.realTimeMonitorDataList);
       this.orderInfo = data.orderInfo;
       this.payDetail = data.payRecordList; // 数组
       this.orderRefundInfoList = data.orderRefundInfoList; // 数组