修改充电订单页面样式

jsowell-ui/src/views/order/order/index copy.vue

@@ -0,0 +1,553 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="168px" @submit.native.prevent>
+      <el-form-item label="站点" prop="stationId">
+        <el-select
+          v-model="queryParams.stationId"
+          placeholder="请选择站点"
+          clearable
+          filterable
+          style="width: 140px"
+        >
+          <el-option
+            v-for="station in stationList"
+            :key="station.id"
+            :label="station.stationName"
+            :value="station.id"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="订单编号" prop="orderCode">
+        <el-input
+          v-model="queryParams.orderCode"
+          placeholder="请输入订单编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="交易流水号" prop="transactionCode">
+        <el-input
+          v-model="queryParams.transactionCode"
+          placeholder="请输入交易流水号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="订单状态" prop="orderStatus">
+        <el-select
+          v-model="queryParams.orderStatus"
+          placeholder="请选择订单状态"
+          clearable
+          style="width: 140px"
+        >
+          <el-option
+            v-for="dict in dict.type.order_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="手机号码" prop="mobileNumber">
+        <el-input
+          v-model="queryParams.mobileNumber"
+          placeholder="请输入手机号码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="createTimeRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          :default-time="['00:00:00', '23:59:59']"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :clearable=false
+        ></el-date-picker>
+      </el-form-item>
+   </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-col>
+      <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['order:order:export']">导出</el-button>
+      <div>
+        {{dateDescription}}期间，总用电量{{sumUsedElectricity}}度，总消费金额{{sumOrderAmount}}元
+      </div>
+      <el-popover
+        placement="top-start"
+        width="400"
+        trigger="click">
+        <el-checkbox  :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+        <div style="margin: 15px 0;"></div>
+        <el-checkbox-group style="display: grid" v-model="checkedCities" @change="handleCheckedCitiesChange">
+          <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
+        </el-checkbox-group>
+
+        <el-button style="float: right" icon="el-icon-s-grid" slot="reference">筛选</el-button>
+      </el-popover>
+    </el-row>
+    <!--<el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['order:order:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['order:order:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['order:order:remove']"
+        >删除</el-button>
+      </el-col>
+      &lt;!&ndash;<el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['order:order:export']"
+        >导出</el-button>
+      </el-col>&ndash;&gt;
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>-->
+
+    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="订单编号" align="center" prop="orderCode" width="150px"  fixed>
+        <template slot-scope="scope">
+          <router-link
+            :to="'/order/index/orderDetail/'+scope.row.orderCode"
+            class="link-type"
+          >
+            <span>{{ scope.row.orderCode }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+      <!--<el-table-column label="订单状态" align="center" prop="orderStatus">
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.order_status"
+            :value="scope.row.orderStatus"
+          />
+        </template>
+      </el-table-column>-->
+      <el-table-column label="订单状态描述" align="center" prop="orderStatusDescribe" width="100px" fixed>
+        <template slot-scope="scope">
+          <el-tag :type="getTagType(scope.row)">{{scope.row.orderStatusDescribe}}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="交易流水号" align="center" prop="transactionCode" width="280px"/>
+      <el-table-column label="会员昵称" align="center" prop="nickName" width="120px"/>
+      <el-table-column label="电话号码" align="center" prop="mobileNumber" width="120px"/>
+      <el-table-column label="站点" align="center" prop="stationName"/>
+      <el-table-column label="充电桩枪口号" align="center" prop="pileConnectorCode" width="200px"/>
+      <el-table-column label="卡号" align="center" prop="logicCard" width="200px"/>
+      <el-table-column label="微信商户订单号" align="center" prop="outTradeNo" width="165px"/>
+      <el-table-column label="启动方式" align="center" prop="startMode" width="100px">
+      <template slot-scope="scope">
+        <dict-tag
+          :options="dict.type.start_mode"
+          :value="scope.row.startMode"
+        />
+      </template>
+      </el-table-column>
+      <el-table-column label="支付方式" align="center" prop="payMode">
+      <template slot-scope="scope">
+        <dict-tag
+          :options="dict.type.pay_mode"
+          :value="scope.row.payMode"
+        />
+      </template>
+      </el-table-column>
+      <el-table-column label="支付状态" align="center" prop="payStatus">
+      <template slot-scope="scope">
+        <dict-tag
+          :options="dict.type.pay_status"
+          :value="scope.row.payStatus"
+        />
+      </template>
+      </el-table-column>
+      <el-table-column label="支付金额" align="center" prop="payAmount" />
+      <el-table-column label="充电度数" align="center" prop="chargingDegree" width="100px"/>
+      <el-table-column label="起始soc" align="center" prop="startSoc" />
+      <el-table-column label="终止soc" align="center" prop="endSoc" />
+      <el-table-column label="开始充电时间" align="center" prop="chargeStartTime" width="180"/>
+      <el-table-column label="结束充电时间" align="center" prop="chargeEndTime" width="180"/>
+      <el-table-column label="总消费金额" align="center" prop="orderAmount" width="100px"  fixed="right"/>
+      <el-table-column label="虚拟金额" align="center" prop="virtualAmount" width="100px"  fixed="right"/>
+      <el-table-column label="结算金额" align="center" prop="settleAmount" width="100px"  fixed="right"/>
+      <!--<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['order:order:edit']"
+          >修改
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['order:order:remove']"
+          >删除
+          </el-button>
+        </template>
+      </el-table-column>-->
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import {listOrder, getOrder, delOrder, addOrder, updateOrder, totalData} from "@/api/order/order";
+import Template from "@/views/billing/template";
+import {listStation} from "@/api/pile/station";
+import {getDay} from "@/utils/common";
+import log from "@/views/monitor/job/log";
+
+export default {
+  name: "Order",
+  components: {Template},
+
+  dicts: ['order_status', 'start_mode', 'pay_mode', 'pay_status'],
+  data() {
+    return {
+      checkAll: false,
+      checkedCities: [],
+      cities: ['订单状态描述', '启动方式', '起始SOC', '终止SOC'],
+      isIndeterminate: true,
+      dateDescription: '',
+      sumOrderAmount:'',
+      sumUsedElectricity:'',
+      // 遮罩
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 子表选中数据
+      checkedOrderDetail: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 订单表格数据
+      orderList: [],
+      // 订单详情表格数据
+      orderDetailList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        orderCode: null,
+        transactionCode: null,
+        mobileNumber: null,
+        orderStatus: null,
+        stationId: null,
+        startTime: null,
+        endTime: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+      // 站点列表
+      stationList: [],
+      // 订单创建时间范围
+      createTimeRange: [],
+    };
+  },
+  created() {
+    this.dataLoading();
+  },
+  methods: {
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? cityOptions : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      console.log(value)
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    getTagType(row) {
+      // console.log(this.dict.type.order_status,'订单描述')
+      let arr = this.dict.type.order_status.find( item => item.value === row.orderStatus)
+      // console.log(arr.raw.listClass,'arr.raw.listClass')
+      return arr.raw.listClass
+      // for (let i = 0; i < this.dict.type.order_status.length; i++) {
+      //   let orderStatus = this.dict.type.order_status[i];
+      //   if (orderStatus.value === row.orderStatus) {
+      //     return orderStatus.raw.listClass;
+      //   }
+      // }
+      // return "";
+    },
+    async dataLoading() {
+      console.log("加载订单列表页数据...")
+      // 设置默认日期
+      await this.defaultDate();
+      // 查询订单列表
+      this.getList();
+      // 查询站点列表
+      this.getStationList();
+      // 获取订单总金额
+      this.getOrderTotalData();
+    },
+    /** 查询订单列表 */
+    getList() {
+      this.loading = true;
+      listOrder(this.queryParams).then(response => {
+        this.orderList = response.rows;
+        console.log('order里面的参数', this.orderList)
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 获取订单总金额数据
+    getOrderTotalData() {
+      totalData(this.queryParams).then(response => {
+        console.log('getOrderTotalData', response);
+        this.dateDescription = response.data.dateDescription;
+        this.sumOrderAmount = response.data.sumOrderAmount;
+        this.sumUsedElectricity = response.data.sumUsedElectricity;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        orderCode: null,
+        orderStatus: "0",
+        memberId: null,
+        nickName: null,
+        mobileNumber: null,
+        stationId: null,
+        connectorCode: null,
+        startMode: null,
+        payMode: null,
+        payStatus: null,
+        payAmount: null,
+        payTime: null,
+        orderAmount: null,
+        startSoc: null,
+        endSoc: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        delFlag: null
+      };
+      this.orderDetailList = [];
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      // 获取订单列表
+      this.getList();
+      // 获取订单总金额
+      this.getOrderTotalData();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加订单";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getOrder(id).then(response => {
+        this.form = response.data;
+        this.orderDetailList = response.data.orderDetailList;
+        this.open = true;
+        this.title = "修改订单";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.form.orderDetailList = this.orderDetailList;
+          if (this.form.id != null) {
+            updateOrder(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addOrder(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除订单编号为"' + ids + '"的数据项？').then(function () {
+        return delOrder(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+    /** 订单详情序号 */
+    rowOrderDetailIndex({row, rowIndex}) {
+      row.index = rowIndex + 1;
+    },
+    /** 订单详情添加按钮操作 */
+    handleAddOrderDetail() {
+      let obj = {};
+      obj.totalUsedElectricity = "";
+      obj.totalOrderAmount = "";
+      obj.totalElectricityAmount = "";
+      obj.totalServiceAnount = "";
+      obj.sharpUsedElectricity = "";
+      obj.sharpElectricityPrice = "";
+      obj.sharpServicePrice = "";
+      obj.peakUsedElectricity = "";
+      obj.peakElectricityPrice = "";
+      obj.peakServicePrice = "";
+      obj.flatUsedElectricity = "";
+      obj.flatElectricityPrice = "";
+      obj.flatServicePrice = "";
+      obj.valleyUsedElectricity = "";
+      obj.valleyElectricityPrice = "";
+      obj.valleyServicePrice = "";
+      this.orderDetailList.push(obj);
+    },
+    /** 订单详情删除按钮操作 */
+    handleDeleteOrderDetail() {
+      if (this.checkedOrderDetail.length === 0) {
+        this.$modal.msgError("请先选择要删除的订单详情数据");
+      } else {
+        const orderDetailList = this.orderDetailList;
+        const checkedOrderDetail = this.checkedOrderDetail;
+        this.orderDetailList = orderDetailList.filter(function (item) {
+          return checkedOrderDetail.indexOf(item.index) === -1
+        });
+      }
+    },
+    /** 复选框选中数据 */
+    handleOrderDetailSelectionChange(selection) {
+      this.checkedOrderDetail = selection.map(item => item.index)
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('order/order/export', {
+        ...this.queryParams
+      }, `order_${new Date().getTime()}.xlsx`)
+    },
+    /** 查询充电站信息列表 */
+    getStationList() {
+      const queryStationParams = {
+        pageNum: 1,
+        pageSize: 999
+      };
+      listStation(queryStationParams).then((response) => {
+        console.log("订单列表页-查询站点列表", response)
+        this.stationList = response.rows;
+      });
+    },
+
+    //设置默认日期
+    defaultDate () {
+      //字符串拼接，开始时间，结束时间
+      let beg = getDay(-7) + " 00:00:00";   //当月第一天
+      let end = getDay(0) + " 23:59:59"; //当天
+      this.createTimeRange = [beg, end] //将值设置给插件绑定的数据
+      // return this.createTimeRange;
+    },
+  },
+  watch: {
+    createTimeRange(newValue, oldValue) {
+      // console.log("createTimeRange发生变化", newValue, oldValue);
+      if (newValue != null && newValue.length > 0) {
+        this.queryParams.startTime = newValue[0];
+        this.queryParams.endTime = newValue[1];
+      }
+    },
+  },
+  computed: {
+    tagType(row){
+      console.log("tagType row", row);
+      return "info";
+    }
+  },
+};
+</script>

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

@@ -51,7 +51,6 @@
           />
         </el-select>
       </el-form-item>
-
       <el-form-item label="手机号码" prop="mobileNumber">
         <el-input
           v-model="queryParams.mobileNumber"
@@ -146,92 +145,42 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>-->
 
-    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
+   <div class="cardview-box" v-for="(item,index) in orderList"  :key="index" @change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
+     <div class="cardview-static">
-      <el-table-column label="订单编号" align="center" prop="orderCode" width="150px"  fixed>
+      <div>
-        <template slot-scope="scope">
+       订单编号：{{item.orderCode}}
+        <el-tag type="success">{{item.orderStatusDescribe}}</el-tag>
+      </div>
+      <div>开始时间：{{item.chargeStartTime || '一'}}</div>
+     </div>
+      <div style="display:flex;padding:10px">
+        <el-descriptions :title="item.nickName" :colum="3" style="width:80%">
+  <span>{{item.mobileNumber}}</span>
+    <el-descriptions-item label="交易流水号">{{item.transactionCode || '一'}}</el-descriptions-item>
+    <el-descriptions-item label="站点">{{item.stationName || '一'}}</el-descriptions-item>
+    <el-descriptions-item label="充电桩枪口号">{{item.pileConnectorCode || '一'}}</el-descriptions-item>
+    <el-descriptions-item label="卡号">{{item.logicCard || '一'}}</el-descriptions-item>
+    <el-descriptions-item label="微信商户订单号">{{item.outTradeNo || '一'}}</el-descriptions-item>
+    <el-descriptions-item label="启动方式">{{startMode(item.startMode)}}</el-descriptions-item>
+    <el-descriptions-item label="支付方式">{{payMode(item.payMode)}}</el-descriptions-item>
+    <el-descriptions-item label="支付金额">{{item.payAmount || '一'}}</el-descriptions-item>
+    <el-descriptions-item label="支付状态">{{payStatus(item.payStatus)}}</el-descriptions-item>
+    <el-descriptions-item label="充电度数">{{item.chargingDegree || '一'}}</el-descriptions-item>
+    <el-descriptions-item label="起始SOC">{{item.startSoc || '一'}}</el-descriptions-item>
+    <el-descriptions-item label="终止SOC">{{item.endSoc || '一'}}</el-descriptions-item>
+    <el-descriptions-item label="结束充电时间">{{item.chargeEndTime || '一'}}</el-descriptions-item>
+    <el-descriptions-item label="总消费金额">{{item.orderAmount || '一'}}</el-descriptions-item>
+    <el-descriptions-item label="虚拟金额">{{item.virtualAmount || '一'}}</el-descriptions-item>
+    <el-descriptions-item label="结算金额">{{item.settleAmount || '一'}}</el-descriptions-item>    
+</el-descriptions>
+<div style="flex:1;text-align: center;margin:auto">
    <router-link
-            :to="'/order/index/orderDetail/'+scope.row.orderCode"
+            :to="'/order/index/orderDetail/'+item.orderCode"
             class="link-type"
-          >
+          >详情</router-link>
-            <span>{{ scope.row.orderCode }}</span>
+</div>
-          </router-link>
+      </div>
-        </template>
+   </div>
-      </el-table-column>
-      <!--<el-table-column label="订单状态" align="center" prop="orderStatus">
-        <template slot-scope="scope">
-          <dict-tag
-            :options="dict.type.order_status"
-            :value="scope.row.orderStatus"
-          />
-        </template>
-      </el-table-column>-->
-      <el-table-column label="订单状态描述" align="center" prop="orderStatusDescribe" width="100px" fixed>
-        <template slot-scope="scope">
-          <el-tag :type="getTagType(scope.row)">{{scope.row.orderStatusDescribe}}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="交易流水号" align="center" prop="transactionCode" width="280px"/>
-      <el-table-column label="会员昵称" align="center" prop="nickName" width="120px"/>
-      <el-table-column label="电话号码" align="center" prop="mobileNumber" width="120px"/>
-      <el-table-column label="站点" align="center" prop="stationName"/>
-      <el-table-column label="充电桩枪口号" align="center" prop="pileConnectorCode" width="200px"/>
-      <el-table-column label="卡号" align="center" prop="logicCard" width="200px"/>
-      <el-table-column label="微信商户订单号" align="center" prop="outTradeNo" width="165px"/>
-      <el-table-column label="启动方式" align="center" prop="startMode" width="100px">
-      <template slot-scope="scope">
-        <dict-tag
-          :options="dict.type.start_mode"
-          :value="scope.row.startMode"
-        />
-      </template>
-      </el-table-column>
-      <el-table-column label="支付方式" align="center" prop="payMode">
-      <template slot-scope="scope">
-        <dict-tag
-          :options="dict.type.pay_mode"
-          :value="scope.row.payMode"
-        />
-      </template>
-      </el-table-column>
-      <el-table-column label="支付状态" align="center" prop="payStatus">
-      <template slot-scope="scope">
-        <dict-tag
-          :options="dict.type.pay_status"
-          :value="scope.row.payStatus"
-        />
-      </template>
-      </el-table-column>
-      <el-table-column label="支付金额" align="center" prop="payAmount" />
-      <el-table-column label="充电度数" align="center" prop="chargingDegree" width="100px"/>
-      <el-table-column label="起始soc" align="center" prop="startSoc" />
-      <el-table-column label="终止soc" align="center" prop="endSoc" />
-      <el-table-column label="开始充电时间" align="center" prop="chargeStartTime" width="180"/>
-      <el-table-column label="结束充电时间" align="center" prop="chargeEndTime" width="180"/>
-      <el-table-column label="总消费金额" align="center" prop="orderAmount" width="100px"  fixed="right"/>
-      <el-table-column label="虚拟金额" align="center" prop="virtualAmount" width="100px"  fixed="right"/>
-      <el-table-column label="结算金额" align="center" prop="settleAmount" width="100px"  fixed="right"/>
-      <!--<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['order:order:edit']"
-          >修改
-          </el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['order:order:remove']"
-          >删除
-          </el-button>
-        </template>
-      </el-table-column>-->
-    </el-table>
 
     <pagination
       v-show="total>0"
@@ -296,7 +245,7 @@ export default {
         orderStatus: null,
         stationId: null,
         startTime: null,
-        endTime: null,
+        endTime: null
       },
       // 表单参数
       form: {},
@@ -312,6 +261,30 @@ export default {
     this.dataLoading();
   },
   methods: {
+    startMode(mode){
+      let arr = this.dict.type.start_mode.find(item => item.value == mode) 
+      if (arr == null) {
+        return '一'
+      } else {
+        return arr.label
+      }
+    },
+     payMode(mode){
+      let arr = this.dict.type.pay_mode.find(item => item.value == mode) 
+      if (arr == null) {
+        return '一'
+      } else {
+        return arr.label
+      }
+    },
+    payStatus(status){
+       let arr = this.dict.type.pay_status.find(item => item.value == status) 
+      if (arr == null) {
+        return '一'
+      } else {
+        return arr.label
+      }
+    },
     handleCheckAllChange(val) {
       this.checkedCities = val ? cityOptions : [];
       this.isIndeterminate = false;
@@ -551,3 +524,30 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.cardview-box{
+  width: 100%;
+    margin-bottom: 12px;
+    font-size: 16px;
+    color: #4a4a4a;
+    border:1px solid #f0f0f0;
+}
+.cardview-static{
+  height:100%;
+  width:100%;
+  display: flex; 
+   justify-content: space-between;
+    align-content: center;
+    padding: 0 10px;
+    height: 46px;
+line-height: 46px;
+  background-color:#f0f0f0;
+}
+.flex{
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  margin-bottom: 10px;
+  
+}
+</style>