From 598843d0837837e0df60c89313982efae2195408 Mon Sep 17 00:00:00 2001
From: admin-lmm <2497833386@QQ.com>
Date: Thu, 31 Aug 2023 16:04:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jsowell-ui/src/App.vue                        |  33 +-
 .../src/views/financial/financeDetail.vue     | 172 ++++---
 jsowell-ui/src/views/order/order/index.vue    |  25 +-
 .../src/views/order/order/orderDetail.vue     | 447 ++++++++++++------
 4 files changed, 443 insertions(+), 234 deletions(-)

diff --git a/jsowell-ui/src/App.vue b/jsowell-ui/src/App.vue
index 4c32ca13b..432b903ad 100644
--- a/jsowell-ui/src/App.vue
+++ b/jsowell-ui/src/App.vue
@@ -5,17 +5,21 @@
 </template>
 
 <script>
-export default  {
-  name:  'App',
-    metaInfo() {
-        return {
-            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
-            titleTemplate: title => {
-                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
-            }
-        }
-    }
-}
+export default {
+  name: "App",
+  metaInfo() {
+    return {
+      title:
+        this.$store.state.settings.dynamicTitle &&
+        this.$store.state.settings.title,
+      titleTemplate: (title) => {
+        return title
+          ? `${title} - ${process.env.VUE_APP_TITLE}`
+          : process.env.VUE_APP_TITLE;
+      },
+    };
+  },
+};
 </script>
 <style>
 /* 给所有表格空项加上一 */
@@ -23,7 +27,10 @@ export default  {
 .el-table .el-table__body td .cell > span:empty::after,
 .el-table .el-table__body td .cell .approval:empty::after,
 .el-table .el-table__body td .cell div:empty::after,
-.el-table .el-table__body td .cell .line-limit-length:empty::after{
-  content: '一';
+.el-table .el-table__body td .cell .line-limit-length:empty::after {
+  content: "一";
+}
+.el-descriptions-item__content:empty::after {
+  content: "一";
 }
 </style>
diff --git a/jsowell-ui/src/views/financial/financeDetail.vue b/jsowell-ui/src/views/financial/financeDetail.vue
index fd5538a5a..7429dfe80 100644
--- a/jsowell-ui/src/views/financial/financeDetail.vue
+++ b/jsowell-ui/src/views/financial/financeDetail.vue
@@ -7,7 +7,7 @@
     <div class="header" v-loading="loading">
       <template v-if="operationStatus == null">
         <div class="foot1">
-          <div style="margin: 12px 0">没有查询到结算账户</div>
+          <div style="margin: 12px 0">未查询到结算账户</div>
         </div>
       </template>
       <template v-else>
@@ -17,34 +17,56 @@
             v-for="(item, index) in settleAccountList"
             :key="index"
           >
-            <div>
-              <span>运营商：</span>
-              {{ merchant }}
-            </div>
-            <div class="margin-10">
-              商家性质：{{ merchantNature === "1" ? "对公" : "对私" }}
-            </div>
-            <div class="margin-10">
-              开户行名称：{{ cityBankCode(item.bankCode) }}
-            </div>
-            <div>收款卡号：{{ item.cardId }}</div>
-            <div class="margin-10">预留手机：{{ item.telNo }}</div>
+            <el-descriptions :column="1">
+              <el-descriptions-item label="运营商">
+                <span class="color">
+                  {{ merchant }}
+                </span>
+              </el-descriptions-item>
+              <el-descriptions-item label="商家性质">
+                <span class="color">{{
+                  merchantNature === "1" ? "对公" : "对私"
+                }}</span>
+              </el-descriptions-item>
+              <el-descriptions-item label="开户行名称">
+                <span class="color">{{ cityBankCode(item.bankCode) }}</span>
+              </el-descriptions-item>
+              <el-descriptions-item label="收款卡号">
+                <span class="color">{{ item.cardId }}</span>
+              </el-descriptions-item>
+              <el-descriptions-item label="预留手机">
+                <span class="color">{{ item.telNo }}</span>
+              </el-descriptions-item>
+            </el-descriptions>
           </div>
         </template>
         <div class="foot1" v-else>
-          <div>
-            <span>运营商：</span>
-            {{ merchant }}
-          </div>
-          <div class="margin-10">
-            商家性质：{{ merchantNature === "1" ? "对公" : "对私" }}
-          </div>
-          <div>开户状态：{{ adapayCorpMember.auditDesc }}</div>
-          <div class="margin-10">
-            开户行名称：{{ cityBankCode(adapayCorpMember.bankCode) }}
-          </div>
-          <div>收款卡号：{{ adapayCorpMember.cardNo }}</div>
-          <div class="margin-10">预留手机：{{ adapayCorpMember.legalMp }}</div>
+          <el-descriptions :column="1">
+            <el-descriptions-item label="运营商">
+              <span class="color">
+                {{ merchant }}
+              </span>
+            </el-descriptions-item>
+            <el-descriptions-item label="商家性质">
+              <span class="color">{{
+                merchantNature === "1" ? "对公" : "对私"
+              }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="开户状态">
+              <span class="color">{{ adapayCorpMember.auditDesc }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="开户行名称">
+              <span class="color">{{
+                cityBankCode(adapayCorpMember.bankCode)
+              }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="收款卡号">
+              <span class="color">{{ adapayCorpMember.cardNo }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="预留手机">
+              <span class="color">{{ adapayCorpMember.legalMp }}</span>
+            </el-descriptions-item>
+          </el-descriptions>
         </div>
       </template>
       <div class="foot2">
@@ -97,38 +119,39 @@
         <div class="foot4">未查询到运营商结算账户，提现功能现已关闭</div>
       </template>
       <template v-else>
-        <div class="foot4">
-          <div class="margin-right">
-            <div>可提现(元)</div>
-            <div class="margin-10">{{ adapayMember.avlBalance }}</div>
-            <el-button
-              type="primary"
-              v-if="adapayMember.avlBalance > withdrawalFee"
-              @click="dialogVisible = true"
-              >提现申请</el-button
+        <div class="margin-right foot4">
+          <div class="color60">可提现(元)</div>
+          <div class="margin-20 color">{{ adapayMember.avlBalance }}</div>
+          <el-button
+            type="primary"
+            v-if="adapayMember.avlBalance > withdrawalFee"
+            @click="dialogVisible = true"
+            >提现申请</el-button
+          >
+          <div v-else>
+            注:
+            <span class="text"
+              >该余额大于{{ withdrawalFee }}元时，才可发起取现</span
             >
-            <p class="center" v-else>
-              注:
-              <span class="text"
-                >该余额大于{{ withdrawalFee }}元时，才可发起取现</span
-              >
-            </p>
           </div>
-          <div class="margin-right">
-            <div class="">冻结金额(元)</div>
-            <div class="margin-10">{{ adapayMember.frzBalance }}</div>
-            <div class="">
-              注:
-              <span class="text"
-                >当配置了自动结算功能，在每日发起结算时会将可用余额转为冻结金额。该部分金额不允许取现。</span
-              >
-            </div>
+        </div>
+        <div class="margin-right foot4" style="width: 20%">
+          <div class="color60">冻结金额(元)</div>
+          <div class="margin-20 color">{{ adapayMember.frzBalance }}</div>
+          <div>
+            注:
+            <span class="text"
+              >当配置了自动结算功能，在每日发起结算时会将可用余额转为冻结金额。该部分金额不允许取现。</span
+            >
           </div>
-          <div class="margin-right">
-            <div class="">昨日日终余额(元)</div>
-            <div class="margin-10">{{ adapayMember.lastAvlBalance }}</div>
-          </div>
-          <!-- <div class="margin-right">
+        </div>
+        <!-- <div class="foot4"> -->
+
+        <!-- <div class="margin-right">
+            <div class="color60">昨日日终余额(元)</div>
+            <div class="margin-20 color">{{ adapayMember.lastAvlBalance }}</div>
+          </div> -->
+        <!-- <div class="margin-right">
             <div>提现申请中</div>
             <div class="margin-10">
               {{ adapayMember.withdrawalApplication }}(元)
@@ -142,7 +165,7 @@
             <div class="margin-10">{{ adapayMember.withdrawn }}(元)</div>
             <div style="font-size: 13px">已成功提现到绑定银行卡的金额汇总</div>
           </div> -->
-        </div>
+        <!-- </div> -->
       </template>
     </div>
     <hr />
@@ -266,15 +289,15 @@
       </div>
       <p>
         可提现（元）：
-        <span class="number">{{ adapayMember.avlBalance }}</span>
+        <span class="number color">{{ adapayMember.avlBalance }}</span>
       </p>
       <p>
         手续费（元）：
-        <span class="number">{{ withdrawalFee.toFixed(2) }}</span>
+        <span class="number color">{{ withdrawalFee.toFixed(2) }}</span>
       </p>
       <p>
         实际到账（元）：
-        <span class="number">
+        <span class="number color">
           <!-- <span>11</span> -->
           {{ adapayMember.avlBalance - withdrawalFee }}
         </span>
@@ -317,7 +340,7 @@
       :visible.sync="dialogTableVisible"
       :before-close="orderClose"
     >
-      <el-table :data="orderList" v-loading="loading">
+      <el-table :data="orderList" v-loading="orderLoading">
         <el-table-column property="orderCode" label="订单编号" />
         <el-table-column property="settleAmount" label="结算金额(元)" />
         <el-table-column property="clearingStatus" label="清分状态">
@@ -356,6 +379,7 @@ export default {
   dicts: ["bill_status"],
   data() {
     return {
+      orderLoading: true,
       loading: true,
       operationStatus: null,
       adapayMember: {},
@@ -409,7 +433,7 @@ export default {
       let arr = bankList.find((item) => item.bankCode === code);
       // console.log("银行编码对应的银行名称 arr", arr);
       if (arr.bankName != null) {
-        this.bankName = arr.bankName
+        this.bankName = arr.bankName;
       }
       return this.bankName;
     },
@@ -453,13 +477,13 @@ export default {
     },
     // 订单流水请求
     getOrderList() {
-      this.loading = true;
+      this.orderLoading = true;
       console.log("this.getOrderParams", this.getOrderParams);
       getOrderReportDetail(this.getOrderParams).then((res) => {
         console.log("获取订单列表res", res);
         this.orderList = res.rows;
         this.orderTotal = res.total;
-        this.loading = false;
+        this.orderLoading = false;
         // console.log("this.orderTotal", this.orderTotal);
       });
     },
@@ -567,13 +591,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.color60 {
+  color: #606266;
+}
 .center {
   display: flex;
   align-content: center;
   margin-top: 30px;
 }
-.margin-10 {
-  margin: 10px 0;
+.margin-20 {
+  margin: 20px 0;
+  font-size: 20px;
 }
 .font-13 {
   font-size: 13px;
@@ -591,10 +619,11 @@ export default {
   color: red;
 }
 .foot1 {
+  width: 25%;
   margin-top: 10px;
-  // width: 320px;
-  // margin-right: 10px;
-  // font-size: 13px;
+  // .el-descriptions__body .el-descriptions__table {
+  //   width: 0 !important;
+  // }
 }
 .foot2 {
   margin-left: 10px;
@@ -606,8 +635,11 @@ export default {
   margin-right: 10px;
 }
 .foot4 {
-  flex: 1;
-  display: contents;
+  display: inline-block;
+  // flex: 1;
+  // display: flex;
+  // justify-content: space-between;
+  // margin-left: 50px;
 }
 .margin-right {
   width: 180px;
diff --git a/jsowell-ui/src/views/order/order/index.vue b/jsowell-ui/src/views/order/order/index.vue
index 2e31c0fb7..11a558fba 100644
--- a/jsowell-ui/src/views/order/order/index.vue
+++ b/jsowell-ui/src/views/order/order/index.vue
@@ -206,7 +206,7 @@
               </div>
               <div>开始时间：{{ item.chargeStartTime || "一" }}</div>
             </div>
-            <div style="padding: 10px">
+            <div class="conter">
               <el-descriptions
                 class="title"
                 :title="`${item.nickName || '---'}（${
@@ -217,23 +217,23 @@
                 <!-- @click.native="goMemberDetail(item)" -->
                 <el-descriptions-item label="站点名称">
                   <div style="color: #337ab7" @click="goStationDetail(item)">
-                    {{ item.stationName || "一" }}
+                    {{ item.stationName }}
                   </div>
                 </el-descriptions-item>
                 <el-descriptions-item label="实时充电度数"
-                  >{{ item.realTimeChargingDegree || "一" }}
+                  >{{ item.realTimeChargingDegree }}
                 </el-descriptions-item>
                 <el-descriptions-item label="实时消费金额"
-                  >{{ item.realTimeAmount || "一" }}
+                  >{{ item.realTimeAmount }}
                 </el-descriptions-item>
                 <el-descriptions-item label="起始SOC"
-                  >{{ item.startSoc || "一" }}
+                  >{{ item.startSoc }}
                 </el-descriptions-item>
                 <el-descriptions-item label="终止SOC"
-                  >{{ item.endSoc || "一" }}
+                  >{{ item.endSoc }}
                 </el-descriptions-item>
                 <el-descriptions-item label="结束充电时间"
-                  >{{ item.chargeEndTime || "一" }}
+                  >{{ item.chargeEndTime }}
                 </el-descriptions-item>
                 <el-descriptions-item label="启动方式"
                   >{{ startMode(item.startMode) }}
@@ -673,15 +673,16 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-::v-deep .el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell {
-  padding-bottom: 4px;
+.conter {
+  padding: 10px;
 }
-
-::v-deep .el-descriptions__header {
+::v-deep .conter .el-descriptions__header {
   margin-bottom: 10px;
   // color:#337ab7
 }
-
+::v-deep .conter .el-descriptions-item__cell {
+  padding-bottom: 4px;
+}
 .cardview-box {
   width: 100%;
   margin-bottom: 12px;
diff --git a/jsowell-ui/src/views/order/order/orderDetail.vue b/jsowell-ui/src/views/order/order/orderDetail.vue
index 35ed258a3..aa204ef76 100644
--- a/jsowell-ui/src/views/order/order/orderDetail.vue
+++ b/jsowell-ui/src/views/order/order/orderDetail.vue
@@ -1,41 +1,74 @@
 <template>
   <div class="app-container">
-    <el-card class="cardStyle" v-if="orderInfo[0].orderStatus === '4' || orderInfo[0].orderStatus === '2'">
+    <el-card
+      class="cardStyle"
+      v-if="orderInfo.orderStatus === '4' || orderInfo.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>
+        <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-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-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;">
+        <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
+              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
+              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>
+          <el-button type="primary" @click="confirmManualSettlement"
+            >确 定</el-button
+          >
         </span>
       </el-dialog>
     </el-card>
@@ -44,31 +77,25 @@
       <div style="margin: 30px">
         <div
           style="text-align: center; margin-bottom: 30px"
-          v-if="
-            orderInfo[0].orderStatus === '4' ||
-            orderInfo[0].orderStatus === '6'
-          "
+          v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '6'"
         >
           停止理由：
-          <span style="color: red">{{ orderInfo[0].stopReasonMsg }}</span>
+          <span style="color: red">{{ orderInfo.stopReasonMsg }}</span>
         </div>
         <el-steps
-          :active="orderInfo[0].orderStatus !== '6' ? 2 : 4"
+          :active="orderInfo.orderStatus !== '6' ? 2 : 4"
           align-center
           finish-status="success"
         >
           <el-step
             title="客户下单"
-            :description="orderInfo[0].createTime"
+            :description="orderInfo.createTime"
           ></el-step>
           <el-step
             title="开始充电"
-            :description="orderInfo[0].orderStatusDescribe"
-          ></el-step>
-          <el-step
-            title="结束充电"
-            :description="orderInfo[0].endTime"
+            :description="orderInfo.orderStatusDescribe"
           ></el-step>
+          <el-step title="结束充电" :description="orderInfo.endTime"></el-step>
           <el-step title="完成充电" description="充电时长"></el-step>
         </el-steps>
       </div>
@@ -77,99 +104,189 @@
     <!--  订单信息  -->
     <el-card class="cardStyle">
       <h3>订单信息</h3>
-      <el-table style="width: 100%" :data="orderInfo" border>
-        <el-table-column prop="orderCode" label="订单号" align="center" width="120"/>
-        <el-table-column prop="transactionCode" label="交易流水号" align="center" width="280"/>
-        <el-table-column prop="logicCard" label="卡号" align="center" width="80"/>
-        <el-table-column prop="orderStatusDescribe" label="订单状态描述" align="center" width="100"/>
-        <el-table-column prop="startTime" label="充电开始时间" align="center"/>
-        <el-table-column prop="endTime" label="充电结束时间" align="center"/>
-        <el-table-column prop="createTime" label="订单创建时间" align="center"/>
-        <el-table-column prop="settlementTime" label="订单结算时间" align="center"/>
-<!--        <el-table-column prop="settlementTime" label="订单结算金额" align="center"/>-->
-        <el-table-column prop="startSOC" label="起始SOC" align="center" width="80"/>
-        <el-table-column prop="endSOC" label="终止SOC" align="center" width="80"/>
-        <el-table-column prop="stopReasonMsg" label="订单停止原因" align="center" width="100"/>
-      </el-table>
+      <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>
+        <el-descriptions-item label="卡号">{{
+          orderInfo.logicCard
+        }}</el-descriptions-item>
+        <el-descriptions-item label="订单状态描述">{{
+          orderInfo.orderStatusDescribe
+        }}</el-descriptions-item>
+        <el-descriptions-item label="充电开始时间">{{
+          orderInfo.startTime
+        }}</el-descriptions-item>
+        <el-descriptions-item label="充电结束时间">{{
+          orderInfo.endTime
+        }}</el-descriptions-item>
+        <el-descriptions-item label="订单创建时间">{{
+          orderInfo.createTime
+        }}</el-descriptions-item>
+        <el-descriptions-item label="订单结算时间">{{
+          orderInfo.settlementTime
+        }}</el-descriptions-item>
+
+        <el-descriptions-item label="起始SOC">{{
+          orderInfo.startSOC
+        }}</el-descriptions-item>
+        <el-descriptions-item label="终止SOC">{{
+          orderInfo.endSOC
+        }}</el-descriptions-item>
+        <el-descriptions-item label="订单停止原因">{{
+          orderInfo.stopReasonMsg
+        }}</el-descriptions-item>
+      </el-descriptions>
       <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
+        :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>
+      <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="消费金额">{{
+          orderRealTimeInfo.orderAmount === "0.0000"
+            ? "0"
+            : orderRealTimeInfo.orderAmount
+        }}</el-descriptions-item>
+        <el-descriptions-item label="充电度数">{{
+          orderRealTimeInfo.chargedDegree === "0.0000"
+            ? "0"
+            : orderRealTimeInfo.chargedDegree
+        }}</el-descriptions-item>
+        <el-descriptions-item label="充电时长">{{
+          orderRealTimeInfo.chargingTime
+        }}</el-descriptions-item>
+        <el-descriptions-item label="当前soc">{{
+          orderRealTimeInfo.soc
+        }}</el-descriptions-item>
+      </el-descriptions>
       <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>
+      <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-item>
+          <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>
+          <el-descriptions-item label="支付流水号">{{
+            item.outTradeNo
+          }}</el-descriptions-item>
+          <el-descriptions-item label="退款金额">{{
+            item.refundAmount
+          }}</el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <div v-else style="text-align: center">暂无数据</div>
       <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
+          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-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>
@@ -178,11 +295,27 @@
     <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>
@@ -194,27 +327,37 @@
         <el-table-column prop="nickName" label="用户昵称" align="center">
           <template slot-scope="scope">
             <router-link
-              :to="'/member/detail/index/'+scope.row.memberId"
+              :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="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[0].orderStatus === '1' || orderInfo[0].orderStatus === '6'
-      "
+      v-if="orderInfo.orderStatus === '1' || orderInfo.orderStatus === '6'"
     >
       <div class="marginTop"></div>
       <order-echarts :obj="obj"></order-echarts>
@@ -222,16 +365,31 @@
   </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: {
+        "text-align": "center",
+        "word-break": "break-all",
+      },
+      LS: {
+        height: "40px",
+        color: "#515A6E",
+        "text-align": "center",
+        "word-break": "break-all",
+        "font-weight": "bolder",
+      },
       orderCode: this.$route.params.orderCode,
-      orderInfo: [],
+      orderInfo: {},
       payDetail: [],
       // 订单退款列表
       orderRefundInfoList: [],
@@ -241,7 +399,12 @@ export default {
       obj: {},
       orderDetail: [],
       pileIn: [],
-      orderRealTimeInfo: null,
+      orderRealTimeInfo: {
+        orderAmount: null,
+        chargedDegree: null,
+        chargingTime: null,
+        soc: null,
+      },
       // 手动结算对话框Visible
       dialogVisible: false,
       // 最后一次实时监测数据
@@ -253,7 +416,7 @@ export default {
         chargingAmount: null,
         chargingDegree: null,
       },
-      tableData: []
+      tableData: [],
     };
   },
   created() {
@@ -261,15 +424,19 @@ export default {
   },
   methods: {
     getSummaries(param) {
-      const {columns, data} = param;
+      const { columns, data } = param;
       const sums = [];
       columns.forEach((column, index) => {
         if (index === 0) {
-          sums[index] = '合计';
+          sums[index] = "合计";
           return;
         }
-        const values = data.map(item => Number(item[column.property]));
-        if (column.property === 'usedElectricity' || column.property === 'electricityAmount' || column.property === 'serviceAmount') {
+        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)) {
@@ -289,9 +456,9 @@ export default {
     // 重试退款方法
     retryRefundOrder() {
       const param = {
-        orderCode: this.orderCode
+        orderCode: this.orderCode,
       };
-      retryRefundOrder(param).then(response => {
+      retryRefundOrder(param).then((response) => {
         this.getOrderDetail();
       });
     },
@@ -302,27 +469,26 @@ export default {
       if (this.manualSettlementParam.chargingDegree == null) {
         return false;
       }
-      this.manualSettlementParam.orderCode = this.orderInfo[0].orderCode;
+      this.manualSettlementParam.orderCode = this.orderInfo.orderCode;
       console.log("确认手动结算订单param:", this.manualSettlementParam);
-      manualSettlementOrder(this.manualSettlementParam).then(response => {
+      manualSettlementOrder(this.manualSettlementParam).then((response) => {
         this.dialogVisible = false;
         this.getOrderDetail();
-      })
+      });
     },
     async getOrderDetail() {
-      const {data} = await getOrder(this.orderCode);
+      const { data } = await getOrder(this.orderCode);
+
       // console.log("getOrder", data);
       this.obj = data;
-      this.orderInfo = [data.orderInfo];
-      // console.log("this.orderInfo", this.orderDetail);
+      this.orderInfo = data.orderInfo;
       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.orderRealTimeInfo = data.orderRealTimeInfo;
       this.orderDetail = [data.billingDetails];
       this.tableData = data.chargeDetails;
       this.lastMonitorData = data.lastMonitorData;
@@ -339,28 +505,31 @@ export default {
       return [this.lastMonitorData];
     },
     retryRefundFlag() {
-      if (this.orderInfo[0] == null || this.orderInfo[0].orderStatus !== '6') {
+      if (this.orderInfo == null || this.orderInfo.orderStatus !== "6") {
         return false;
       }
-      if (this.payDetail[0] == null || this.payDetail[0].payMode !== '4') {
+      if (this.payDetail[0] == null || this.payDetail.payMode[0] !== "4") {
         return false;
       }
-      if (this.payDetail[0].refundAmount == null || this.payDetail[0].refundAmount <= 0.00 ) {
+      if (
+        this.payDetail[0].refundAmount == null ||
+        this.payDetail[0].refundAmount <= 0.0
+      ) {
         return false;
       }
       if (this.orderRefundInfoList.length === 0) {
         return false;
       }
       return true;
-    }
-  }
+    },
+  },
 };
 </script>
-<style>
+
+<style lang="scss" scoped>
 .cardStyle {
   margin-bottom: 10px;
 }
-
 .marginTop {
   margin-top: 10px;
 }