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

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

@@ -1,101 +1,52 @@
 <template>
   <div class="app-container">
-    <el-card
+    <el-card class="cardStyle" v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '2'">
-      class="cardStyle"
-      v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '2'"
-    >
       <div style="margin: 10px">
-        <span style="color: #bf1c1c"
+        <span style="color: #bf1c1c">该笔订单为异常状态，请检查充电桩状态！</span>
-        >该笔订单为异常状态，请检查充电桩状态！</span
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="dialogVisible = true">手动结算
-        >
+        </el-button>
-        <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="dateTime" label="时间" align="center" />
-          <el-table-column
+          <el-table-column prop="chargingAmount" label="消费金额" align="center" />
-            prop="chargingAmount"
+          <el-table-column prop="chargingDegree" label="充电度数" align="center" />
-            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
+            <el-form-item label="消费金额:" prop="chargingAmount" label-width="80px">
-              label="消费金额:"
+              <el-input-number v-model.number="manualSettlementParam.chargingAmount" :precision="2" :controls="false"
-              prop="chargingAmount"
+                style="width: 50%" />
-              label-width="80px"
-            >
-              <el-input-number
-                v-model.number="manualSettlementParam.chargingAmount"
-                :precision="2"
-                :controls="false"
-                style="width: 50%"
-              />
             </el-form-item>
-            <el-form-item
+            <el-form-item label="充电度数:" prop="chargingDegree" label-width="80px">
-              label="充电度数:"
+              <el-input-number v-model.number="manualSettlementParam.chargingDegree" :precision="2" :controls="false"
-              prop="chargingDegree"
+                style="width: 50%" />
-              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 type="primary" @click="confirmManualSettlement">确 定</el-button>
-          >确 定</el-button
-          >
         </span>
       </el-dialog>
     </el-card>
     <!-- 进度条-->
     <el-card class="cardStyle">
       <div style="margin: 30px">
-        <div
+        <div style="text-align: center; margin-bottom: 30px"
-          style="text-align: center; margin-bottom: 30px"
+          v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '6'">
-          v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '6'"
-        >
           停止理由：
           <span style="color: red">{{ orderInfo.stopReasonMsg }}</span>
         </div>
-        <el-steps
+        <el-steps :active="orderInfo.orderStatus !== '6' ? 2 : 4" align-center finish-status="success">
-          :active="orderInfo.orderStatus !== '6' ? 2 : 4"
+          <el-step title="客户下单" :description="orderInfo.createTime"></el-step>
-          align-center
+          <el-step title="开始充电" :description="orderInfo.orderStatusDescribe"></el-step>
-          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,13 +56,7 @@
     <!--  订单信息  -->
     <el-card class="cardStyle">
       <h3>订单信息</h3>
-      <el-descriptions
+      <el-descriptions direction="vertical" :column="11" border :contentStyle="CS" :label-style="LS">
-        direction="vertical"
-        :column="11"
-        border
-        :contentStyle="CS"
-        :label-style="LS"
-      >
         <el-descriptions-item label="订单号">{{
           orderInfo.orderCode
         }}
@@ -167,43 +112,13 @@
 
     <el-card class="cardStyle">
       <h3>收费明细</h3>
-      <el-table
+      <el-table :data="tableData" border show-summary :summary-method="getSummaries">
-        :data="tableData"
+        <el-table-column prop="periodType" label="时段类型" width="180" align="center" />
-        border
+        <el-table-column prop="electricityPrice" label="电费单价(元/千瓦时)" align="center" />
-        show-summary
+        <el-table-column prop="servicePrice" label="服务费单价(元/千瓦时)" align="center" />
-        :summary-method="getSummaries"
+        <el-table-column prop="usedElectricity" label="用电量(千瓦时)" align="center" />
-      >
+        <el-table-column prop="electricityAmount" label="电费金额(元)" align="center" />
-        <el-table-column
+        <el-table-column prop="serviceAmount" label="服务费金额(元)" align="center" />
-          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,13 +126,7 @@
 
     <el-card class="cardStyle">
       <h3>实时订单数据</h3>
-      <el-descriptions
+      <el-descriptions direction="vertical" :column="5" border :contentStyle="CS" :label-style="LS">
-        direction="vertical"
-        :column="5"
-        border
-        :contentStyle="CS"
-        :label-style="LS"
-      >
         <el-descriptions-item label="时间">{{
           orderRealTimeInfo.time
         }}
@@ -249,15 +158,8 @@
     <el-card class="cardStyle">
       <h3>支付信息</h3>
       <template v-if="payDetail.length !== 0">
-        <el-descriptions
+        <el-descriptions direction="vertical" :column="6" border :contentStyle="CS" :label-style="LS"
-          direction="vertical"
+          v-for="(item, index) in payDetail" :key="index">
-          :column="6"
-          border
-          :contentStyle="CS"
-          :label-style="LS"
-          v-for="(item, index) in payDetail"
-          :key="index"
-        >
           <el-descriptions-item label="支付金额">{{
             item.payAmount
           }}
@@ -291,30 +193,17 @@
     <el-card class="cardStyle">
       <div style="margin: 12px 0">
         <span>退款信息</span>
-        <el-button
+        <el-button icon="el-icon-refresh-right" style="float: right; padding: 3px 0" type="text" @click="retryRefundOrder"
-          icon="el-icon-refresh-right"
+          v-if="retryRefundFlag">
-          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="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
+        <el-table-column prop="createdTime" label="退款申请时间" align="center" />
-          prop="createdTime"
+        <el-table-column prop="succeedTime" label="退款成功时间" align="center" />
-          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
+        <el-table-column prop="merchantName" label="运营商名称" align="center" />
-          prop="merchantName"
+        <el-table-column prop="pileSn" label="设备编号" align="center" />
-          label="运营商名称"
+        <el-table-column prop="ratedCurrent" label="额定电流(A)" align="center" />
-          align="center"
+        <el-table-column prop="ratedVoltage" label="额定电压(V)" align="center" />
-        />
+        <el-table-column prop="ratedPower" label="额定功率(KW)" 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
+            <router-link :to="'/member/detail/index/' + scope.row.memberId" class="link-type">
-              :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="memberId" label="会员ID" align="center" />
-        <el-table-column
+        <el-table-column prop="mobileNumber" label="用户手机号" align="center" />
-          prop="mobileNumber"
+        <el-table-column prop="principalBalance" label="本金金额" align="center" />
-          label="用户手机号"
-          align="center"
-        />
-        <el-table-column
-          prop="principalBalance"
-          label="本金金额"
-          align="center"
-        />
         <!--        <el-table-column prop="giftBalance" label="赠送金额" align="center"/>-->
-        <el-table-column
+        <el-table-column prop="totalAccountAmount" label="总金额" align="center" />
-          prop="totalAccountAmount"
-          label="总金额"
-          align="center"
-        />
       </el-table>
       <div class="marginTop"></div>
     </el-card>
     <!--    时间 描述-->
-    <el-card
+    <el-card class="cardStyle"
-      class="cardStyle"
+      v-if="orderInfo.orderStatus === '1' || orderInfo.orderStatus === '6' && obj.realTimeMonitorDataList !== null">
-      v-if="orderInfo.orderStatus === '1' || orderInfo.orderStatus === '6'"
-    >
       <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);
+      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",