修改充电订单详情不显示bug

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

@@ -1,101 +1,52 @@
 <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"
-        >该笔订单为异常状态，请检查充电桩状态！</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>
+        <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">
           <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>
     <!-- 进度条-->
     <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-step
-            title="客户下单"
-            :description="orderInfo.createTime"
-          ></el-step>
-          <el-step
-            title="开始充电"
-            :description="orderInfo.orderStatusDescribe"
-          ></el-step>
+        <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.endTime"></el-step>
           <el-step title="完成充电" description="充电时长"></el-step>
         </el-steps>
@@ -105,61 +56,55 @@
     <!--  订单信息  -->
     <el-card class="cardStyle">
       <h3>订单信息</h3>
-      <el-descriptions
-        direction="vertical"
-        :column="11"
-        border
-        :contentStyle="CS"
-        :label-style="LS"
-      >
+      <el-descriptions direction="vertical" :column="11" border :contentStyle="CS" :label-style="LS">
         <el-descriptions-item label="订单号">{{
-            orderInfo.orderCode
-          }}
+          orderInfo.orderCode
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="交易流水号">{{
-            orderInfo.transactionCode
-          }}
+          orderInfo.transactionCode
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="卡号">{{
-            orderInfo.logicCard
-          }}
+          orderInfo.logicCard
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="订单状态描述">{{
-            orderInfo.orderStatusDescribe
-          }}
+          orderInfo.orderStatusDescribe
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="充电开始时间">{{
-            orderInfo.startTime
-          }}
+          orderInfo.startTime
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="充电结束时间">{{
-            orderInfo.endTime
-          }}
+          orderInfo.endTime
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="订单创建时间">{{
-            orderInfo.createTime
-          }}
+          orderInfo.createTime
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="订单结算金额">{{
-            orderInfo.settleAmount
-          }}
+          orderInfo.settleAmount
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="订单结算时间">{{
-            orderInfo.settlementTime
-          }}
+          orderInfo.settlementTime
+        }}
         </el-descriptions-item>
 
         <el-descriptions-item label="起始SOC">{{
-            orderInfo.startSOC
-          }}
+          orderInfo.startSOC
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="终止SOC">{{
-            orderInfo.endSOC
-          }}
+          orderInfo.endSOC
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="订单停止原因">{{
-            orderInfo.stopReasonMsg
-          }}
+          orderInfo.stopReasonMsg
+        }}
         </el-descriptions-item>
       </el-descriptions>
       <div class="marginTop"></div>
@@ -167,43 +112,13 @@
 
     <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>
@@ -211,36 +126,30 @@
 
     <el-card class="cardStyle">
       <h3>实时订单数据</h3>
-      <el-descriptions
-        direction="vertical"
-        :column="5"
-        border
-        :contentStyle="CS"
-        :label-style="LS"
-      >
+      <el-descriptions direction="vertical" :column="5" border :contentStyle="CS" :label-style="LS">
         <el-descriptions-item label="时间">{{
-            orderRealTimeInfo.time
-          }}
+          orderRealTimeInfo.time
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="消费金额">{{
-            orderRealTimeInfo.orderAmount === "0.0000"
-              ? "0"
-              : orderRealTimeInfo.orderAmount
-          }}
+          orderRealTimeInfo.orderAmount === "0.0000"
+          ? "0"
+          : orderRealTimeInfo.orderAmount
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="充电度数">{{
-            orderRealTimeInfo.chargedDegree === "0.0000"
-              ? "0"
-              : orderRealTimeInfo.chargedDegree
-          }}
+          orderRealTimeInfo.chargedDegree === "0.0000"
+          ? "0"
+          : orderRealTimeInfo.chargedDegree
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="充电时长">{{
-            orderRealTimeInfo.chargingTime
-          }}
+          orderRealTimeInfo.chargingTime
+        }}
         </el-descriptions-item>
         <el-descriptions-item label="当前soc">{{
-            orderRealTimeInfo.soc
-          }}
+          orderRealTimeInfo.soc
+        }}
         </el-descriptions-item>
       </el-descriptions>
       <div class="marginTop"></div>
@@ -249,38 +158,31 @@
     <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 direction="vertical" :column="6" border :contentStyle="CS" :label-style="LS"
+          v-for="(item, index) in payDetail" :key="index">
           <el-descriptions-item label="支付金额">{{
-              item.payAmount
-            }}
+            item.payAmount
+          }}
           </el-descriptions-item>
           <el-descriptions-item label="支付方式">{{
-              item.payModeDesc
-            }}
+            item.payModeDesc
+          }}
           </el-descriptions-item>
           <el-descriptions-item label="支付状态">{{
-              item.payStatus === "1" ? "支付完成" : "待支付"
-            }}
+            item.payStatus === "1" ? "支付完成" : "待支付"
+          }}
           </el-descriptions-item>
           <el-descriptions-item label="支付时间">{{
-              item.payTime
-            }}
+            item.payTime
+          }}
           </el-descriptions-item>
           <el-descriptions-item label="支付流水号">{{
-              item.outTradeNo
-            }}
+            item.outTradeNo
+          }}
           </el-descriptions-item>
           <el-descriptions-item label="退款金额">{{
-              item.refundAmount
-            }}
+            item.refundAmount
+          }}
           </el-descriptions-item>
         </el-descriptions>
       </template>
@@ -291,30 +193,17 @@
     <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>
@@ -323,27 +212,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>
@@ -354,39 +227,22 @@
       <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="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'"
-    >
+    <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>
@@ -402,7 +258,7 @@ import OrderEcharts from "@/views/order/order/orderEcharts";
 
 export default {
   name: "",
-  components: {OrderEcharts},
+  components: { OrderEcharts },
   data() {
     return {
       CS: {
@@ -452,7 +308,9 @@ export default {
   },
   methods: {
     getSummaries(param) {
-      const {columns, data} = param;
+      console.log(param, '添加调试输出'); 
+      const { columns, data } = param;
+      // console.log(data, 'data');
       const sums = [];
       columns.forEach((column, index) => {
         if (index === 0) {
@@ -505,9 +363,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);
       this.orderInfo = data.orderInfo;
       this.payDetail = data.payRecordList; // 数组
       this.orderRefundInfoList = data.orderRefundInfoList; // 数组
@@ -515,7 +374,9 @@ export default {
       // console.log("this.userInfo", this.userInfo);
       this.pileIn = [data.pileInfo];
       // console.log("this.pileIn", this.pileIn);
-      this.orderRealTimeInfo = data.orderRealTimeInfo;
+      if (data.orderRealTimeInfo !== null) {
+        this.orderRealTimeInfo = data.orderRealTimeInfo;
+      }
       this.orderDetail = [data.billingDetails];
       this.tableData = data.chargeDetails; // array
       this.lastMonitorData = data.lastMonitorData;

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

@@ -15,8 +15,8 @@ export default {
     },
   },
   mounted() {
-    this.init();
     console.log("父组件传递过来的值", this.obj);
+    this.init();
     window.addEventListener("resize", () => {
       this.chart.resize();
     });
@@ -56,7 +56,7 @@ export default {
           },
         },
         legend: {
-          data: ["电流", "电压", "功率",'SOC'],
+          data: ["电流", "电压", "功率", 'SOC'],
         },
         xAxis: {
           type: "category",
@@ -68,8 +68,8 @@ export default {
           // data:['2020-12.20','2021-12.20']
           data: this.obj.realTimeMonitorDataList
             .map((str) => {
-            return str.time.replace(" ", "\n");
-          }),
+              return str.time.replace(" ", "\n");
+            }),
         },
         yAxis: [
           {
@@ -171,8 +171,8 @@ export default {
             // data: data
             data: this.obj.realTimeMonitorDataList
               .map((item) => {
-              return item.instantCurrent;
-            }),
+                return item.instantCurrent;
+              }),
           },
           {
             name: "电压",
@@ -190,8 +190,8 @@ export default {
             // },
             data: this.obj.realTimeMonitorDataList
               .map((item) => {
-              return item.instantVoltage;
-            }),
+                return item.instantVoltage;
+              }),
             // data: arr
           },
           {
@@ -210,8 +210,8 @@ export default {
             // },
             data: this.obj.realTimeMonitorDataList
               .map((item) => {
-              return item.instantPower;
-            }),
+                return item.instantPower;
+              }),
           },
           {
             name: "SOC",
@@ -229,8 +229,8 @@ export default {
             // },
             data: this.obj.realTimeMonitorDataList
               .map((item) => {
-              return item.soc;
-            }),
+                return item.soc;
+              }),
           },
         ],
       };