From c1afcbf2bcb1e790cb02d5c7943cdcf48d9daf8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A3=B7=E5=8F=B6?=
 <14103883+leaf-phos@user.noreply.gitee.com>
Date: Mon, 24 Mar 2025 18:05:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=A6=E8=BE=86=E8=BD=A8=E8=BF=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bst/device.js                         |   7 +-
 src/api/bst/locationLog.js                    |  44 ++
 src/api/bst/order.js                          |  44 ++
 .../components/LocationLogViewDialog.vue      | 117 +++++
 src/views/bst/locationLog/index.vue           | 330 ++++++++++++
 src/views/bst/order/index.vue                 | 474 ++++++++++++++++++
 6 files changed, 1013 insertions(+), 3 deletions(-)
 create mode 100644 src/api/bst/locationLog.js
 create mode 100644 src/api/bst/order.js
 create mode 100644 src/views/bst/locationLog/components/LocationLogViewDialog.vue
 create mode 100644 src/views/bst/locationLog/index.vue
 create mode 100644 src/views/bst/order/index.vue

diff --git a/src/api/bst/device.js b/src/api/bst/device.js
index 9322dc6..d9f3596 100644
--- a/src/api/bst/device.js
+++ b/src/api/bst/device.js
@@ -10,10 +10,11 @@ export function listDevice(query) {
 }
 
 // 查询设备详细
-export function getDevice(id) {
+export function getDevice(id, sn = null) {
   return request({
-    url: '/bst/device/' + id,
-    method: 'get'
+    url: '/bst/device',
+    method: 'get',
+    params: {id, sn }
   })
 }
 
diff --git a/src/api/bst/locationLog.js b/src/api/bst/locationLog.js
new file mode 100644
index 0000000..ed438ad
--- /dev/null
+++ b/src/api/bst/locationLog.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询定位日志列表
+export function listLocationLog(query) {
+  return request({
+    url: '/bst/locationLog/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询定位日志详细
+export function getLocationLog(id) {
+  return request({
+    url: '/bst/locationLog/' + id,
+    method: 'get'
+  })
+}
+
+// 新增定位日志
+export function addLocationLog(data) {
+  return request({
+    url: '/bst/locationLog',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改定位日志
+export function updateLocationLog(data) {
+  return request({
+    url: '/bst/locationLog',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除定位日志
+export function delLocationLog(id) {
+  return request({
+    url: '/bst/locationLog/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/bst/order.js b/src/api/bst/order.js
new file mode 100644
index 0000000..844e04a
--- /dev/null
+++ b/src/api/bst/order.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询订单列表
+export function listOrder(query) {
+  return request({
+    url: '/bst/order/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询订单详细
+export function getOrder(id) {
+  return request({
+    url: '/bst/order/' + id,
+    method: 'get'
+  })
+}
+
+// 新增订单
+export function addOrder(data) {
+  return request({
+    url: '/bst/order',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改订单
+export function updateOrder(data) {
+  return request({
+    url: '/bst/order',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除订单
+export function delOrder(id) {
+  return request({
+    url: '/bst/order/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/views/bst/locationLog/components/LocationLogViewDialog.vue b/src/views/bst/locationLog/components/LocationLogViewDialog.vue
new file mode 100644
index 0000000..fd9eff6
--- /dev/null
+++ b/src/views/bst/locationLog/components/LocationLogViewDialog.vue
@@ -0,0 +1,117 @@
+<template>
+  <el-dialog 
+    :title="title" 
+    :visible.sync="dialogVisible" 
+    width="800px" 
+    append-to-body 
+    @open="handleOpen"
+  >
+    <el-descriptions :column="2" border>
+      <el-descriptions-item label="MAC">
+        {{form.mac | dv}}
+      </el-descriptions-item>
+      <el-descriptions-item label="SN">
+        {{form.sn | dv}}
+      </el-descriptions-item>
+      <el-descriptions-item label="定位">
+        <el-link type="primary" size="mini" @click="handleLocation(form)">
+          {{form.longitude | dv}},{{form.latitude | dv}}
+        </el-link>
+      </el-descriptions-item>
+      <el-descriptions-item label="消息时间">
+        {{form.at | dv}}
+      </el-descriptions-item>
+      <el-descriptions-item label="状态">
+        <dict-tag :options="dict.type.device_status" :value="form.status" size="mini"/>
+      </el-descriptions-item>
+      <el-descriptions-item label="电动车">
+        <dict-tag :options="dict.type.device_iot_status" :value="form.iotStatus" size="mini"/>
+      </el-descriptions-item>
+      <el-descriptions-item label="锁">
+        <dict-tag :options="dict.type.device_lock_status" :value="form.lockStatus" size="mini"/>
+      </el-descriptions-item>
+      <el-descriptions-item label="电门">
+        <dict-tag :options="dict.type.device_quality" :value="form.quality" size="mini"/>
+      </el-descriptions-item>
+      <el-descriptions-item label="电压">
+        {{form.voltage | fix2 | dv}} V
+      </el-descriptions-item>
+      <el-descriptions-item label="信号强度">
+        {{form.signal | dv}}
+      </el-descriptions-item>
+      <el-descriptions-item label="卫星数量" :span="2">
+        {{form.satellites | dv}}
+      </el-descriptions-item>
+      <el-descriptions-item label="消息详情" :span="2">
+        {{form.onenetMsg | dv}}
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getLocationLog } from "@/api/bst/locationLog";
+import FormCol from "@/components/FormCol/index.vue";
+
+export default {
+  name: 'LocationLogViewDialog',
+  components: { FormCol },
+  dicts: ['device_status', 'device_lock_status', 'device_iot_status', 'device_quality'],
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    id: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  data() {
+    return {
+      span: 12,
+      title: '',
+      form: {},
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+      }
+    }
+  },
+  methods: {
+    handleLocation(row) {
+      window.open(`https://ditu.amap.com/regeo?lng=${row.longitude}&lat=${row.latitude}`, '_blank');
+    },
+    handleOpen() {
+      if (this.id == null) {
+        this.$message.error("请选择一条数据");
+      } else {
+        this.getDetail();
+        this.title = "日志详情";
+      }
+    },
+    getDetail() {
+      getLocationLog(this.id).then(response => {
+        this.form = response.data;
+      });
+    },
+    cancel() {
+      this.dialogVisible = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style> 
\ No newline at end of file
diff --git a/src/views/bst/locationLog/index.vue b/src/views/bst/locationLog/index.vue
new file mode 100644
index 0000000..982357b
--- /dev/null
+++ b/src/views/bst/locationLog/index.vue
@@ -0,0 +1,330 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="MAC" prop="mac">
+        <el-input
+          v-model="queryParams.mac"
+          placeholder="请输入MAC"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="SN" prop="sn">
+        <el-input
+          v-model="queryParams.sn"
+          placeholder="请输入SN"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="车辆状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择车辆状态" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.device_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="锁状态" prop="lockStatus">
+        <el-select v-model="queryParams.lockStatus" placeholder="请选择锁状态" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.device_lock_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="电门状态" prop="quality">
+        <el-select v-model="queryParams.quality" placeholder="请选择电门状态" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.device_quality"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="电动车状态" prop="iotStatus" label-width="6em">
+        <el-select v-model="queryParams.iotStatus" placeholder="请选择电动车状态" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.device_iot_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-has-permi="['bst:locationLog:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-has-permi="['bst:locationLog:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="locationLogList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <template v-for="column of showColumns">
+        <el-table-column
+            :key="column.key"
+            :label="column.label"
+            :prop="column.key"
+            :align="column.align"
+            :min-width="column.minWidth"
+            :sort-orders="orderSorts"
+            :sortable="column.sortable"
+            :show-overflow-tooltip="column.overflow"
+            :width="column.width"
+        >
+          <template slot-scope="d">
+            <template v-if="column.key === 'id'">
+              {{d.row[column.key]}}
+            </template>
+            <template v-else-if="column.key === 'status'">
+              <dict-tag :options="dict.type.device_status" :value="d.row[column.key]"/>
+            </template>
+            <template v-else-if="column.key === 'lockStatus'">
+              <dict-tag :options="dict.type.device_lock_status" :value="d.row[column.key]"/>
+            </template>
+            <template v-else-if="column.key === 'quality'">
+              <dict-tag :options="dict.type.device_quality" :value="d.row[column.key]"/>
+            </template>
+            <template v-else-if="column.key === 'iotStatus'">
+              <dict-tag :options="dict.type.device_iot_status" :value="d.row[column.key]"/>
+            </template>
+            <template v-else-if="column.key === 'voltage'">
+              {{d.row[column.key] | fix2 | dv}} V
+            </template>
+            <template v-else-if="column.key === 'location'">
+              <el-link type="primary" size="mini" @click="handleLocation(d.row)">
+                {{d.row.longitude}}<br/>{{d.row.latitude}}
+              </el-link>
+            </template>
+            <template v-else>
+              {{d.row[column.key]}}
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+      <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-view"
+            @click="handleView(scope.row)"
+            v-has-permi="['bst:locationLog:query']"
+          >详情</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-has-permi="['bst:locationLog: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"
+    />
+
+    <!-- 添加或修改定位日志对话框 -->
+    <location-log-view-dialog
+      :visible.sync="open"
+      :id="selectedId"
+      @success="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listLocationLog, delLocationLog} from "@/api/bst/locationLog";
+import { $showColumns } from '@/utils/mixins';
+import FormCol from "@/components/FormCol/index.vue";
+import LocationLogViewDialog from '@/views/bst/locationLog/components/LocationLogViewDialog.vue';
+
+  // 默认排序字段
+const defaultSort = {
+  prop: "at",
+  order: "descending"
+}
+
+export default {
+  name: "LocationLog",
+  mixins: [$showColumns],
+  dicts: ['device_status', 'device_lock_status', 'device_iot_status', 'device_quality'],
+  components: {FormCol, LocationLogViewDialog},
+  data() {
+    return {
+      span: 24,
+      // 字段列表
+      columns: [
+        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
+        {key: 'mac', visible: true, label: 'MAC', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'sn', visible: true, label: 'SN', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'location', visible: true, label: '定位', minWidth: null, sortable: false, overflow: false, align: 'center', width: null},
+        {key: 'at', visible: true, label: '消息时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
+        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'iotStatus', visible: true, label: '电动车', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'lockStatus', visible: true, label: '锁', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'quality', visible: true, label: '电门', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'voltage', visible: true, label: '电压', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'signal', visible: true, label: '信号强度', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'satellites', visible: true, label: '卫星数量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+      ],
+      // 排序方式
+      orderSorts: ['ascending', 'descending', null],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 定位日志表格数据
+      locationLogList: [],
+      // 是否显示弹出层
+      open: false,
+      // 选中的ID
+      selectedId: null,
+      defaultSort,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        orderByColumn: defaultSort.prop,
+        isAsc: defaultSort.order,
+        id: null,
+        mac: null,
+        sn: null,
+        status: null,
+        lockStatus: null,
+        quality: null,
+        iotStatus: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        mac: [
+          { required: true, message: "mac不能为空", trigger: "blur" }
+        ],
+        at: [
+          { required: true, message: "onenet消息时间不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    handleLocation(row) {
+      window.open(`https://ditu.amap.com/regeo?lng=${row.longitude}&lat=${row.latitude}`, '_blank');
+    },
+    /** 当排序按钮被点击时触发 **/
+    onSortChange(column) {
+      if (column.order == null) {
+        this.queryParams.orderByColumn = defaultSort.prop;
+        this.queryParams.isAsc = defaultSort.order;
+      } else {
+        this.queryParams.orderByColumn = column.prop;
+        this.queryParams.isAsc = column.order;
+      }
+      this.getList();
+    },
+    /** 查询定位日志列表 */
+    getList() {
+      this.loading = true;
+      listLocationLog(this.queryParams).then(response => {
+        this.locationLogList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    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.selectedId = null;
+      this.open = true;
+    },
+    handleView(row) {
+      this.selectedId = row.id || this.ids;
+      this.open = true;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.selectedId = row.id || this.ids;
+      this.open = true;
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除定位日志编号为"' + ids + '"的数据项？').then(function() {
+        return delLocationLog(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('bst/locationLog/export', {
+        ...this.queryParams
+      }, `locationLog_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
diff --git a/src/views/bst/order/index.vue b/src/views/bst/order/index.vue
new file mode 100644
index 0000000..14b1488
--- /dev/null
+++ b/src/views/bst/order/index.vue
@@ -0,0 +1,474 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="订单号" prop="no">
+        <el-input
+          v-model="queryParams.no"
+          placeholder="请输入订单号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="SN" prop="deviceSn">
+        <el-input
+          v-model="queryParams.deviceSn"
+          placeholder="请输入设备SN"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="MAC" prop="deviceMac">
+        <el-input
+          v-model="queryParams.deviceMac"
+          placeholder="请输入设备MAC"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="车牌号" prop="deviceVehicleNum">
+        <el-input
+          v-model="queryParams.deviceVehicleNum"
+          placeholder="请输入设备车牌号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择类型" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.order_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="运营区" prop="areaName">
+        <el-input
+          v-model="queryParams.areaName"
+          placeholder="请输入运营区"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="下单用户" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入下单用户名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="支付单号" prop="payNo">
+        <el-input
+          v-model="queryParams.payNo"
+          placeholder="请输入支付单号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @change="handleQuery">
+          <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="returnType">
+        <el-select v-model="queryParams.returnType" placeholder="请选择还车类型" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.order_return_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="套餐名称" prop="suitName">
+        <el-input
+          v-model="queryParams.suitName"
+          placeholder="请输入套餐名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="还车定位方式" prop="returnMode" label-width="7em">
+        <el-select v-model="queryParams.returnMode" placeholder="请选择还车定位方式" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.order_return_mode"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-has-permi="['bst:order:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+    </el-row>
+
+    <el-table  v-loading="loading" :data="orderList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <template v-for="column of showColumns">
+        <el-table-column
+            :key="column.key"
+            :label="column.label"
+            :prop="column.key"
+            :align="column.align"
+            :min-width="column.minWidth"
+            :sort-orders="orderSorts"
+            :sortable="column.sortable"
+            :show-overflow-tooltip="column.overflow"
+            :width="column.width"
+        >
+          <template slot-scope="d">
+            <template v-if="column.key === 'id'">
+              {{d.row[column.key]}}
+            </template>
+            <template v-else-if="column.key === 'suitName'">
+              {{d.row.suitName | dv}}<br/>
+              <dict-tag :options="dict.type.order_type" :value="d.row.type" size="mini"/>
+              <dict-tag :options="dict.type.order_status" :value="d.row.status" size="mini" style="margin-left: 4px;"/>
+              <dict-tag :options="dict.type.suit_riding_rule" :value="d.row.suitRidingRule" size="mini" style="margin-left: 4px;"/>
+            </template>
+            <template v-else-if="column.key === 'returnType'">
+              <dict-tag :options="dict.type.order_return_type" :value="d.row[column.key]" size="mini"/>
+            </template>
+            <template v-else-if="column.key === 'suitRentalUnit'">
+              <dict-tag :options="dict.type.suit_rental_unit" :value="d.row[column.key]" size="mini"/>
+            </template>
+            <template v-else-if="column.key === 'suitRidingRule'">
+            </template>
+            <template v-else-if="column.key === 'returnMode'">
+              <dict-tag :options="dict.type.order_return_mode" :value="d.row[column.key]" size="mini"/>
+            </template>
+            <template v-else-if="column.key === 'totalFee'">
+              <div>
+                <el-row :gutter="8">
+                  <el-col :span="12" v-if="d.row.totalFee != null">总金额：{{d.row.totalFee | fix2 | dv}} 元</el-col>
+                  <el-col :span="12" v-if="d.row.depositFee != null">押金：{{d.row.depositFee | fix2 | dv}} 元</el-col>
+                  <el-col :span="12" v-if="d.row.ridingFee != null">骑行费：{{d.row.ridingFee | fix2 | dv}} 元</el-col>
+                  <el-col :span="12" v-if="d.row.payRefunded != null">退款：{{d.row.payRefunded | fix2 | dv}} 元</el-col>
+                </el-row>
+                <el-popover
+                  placement="right"
+                  width="400"
+                  trigger="hover">
+                  <el-row :gutter="8">
+                    <el-col :span="12">调度费：{{d.row.dispatchFee | fix2 | dv}} 元</el-col>
+                    <el-col :span="12">管理费：{{d.row.manageFee | fix2 | dv}} 元</el-col>
+                    <el-col :span="12">车损费：{{d.row.deductionFee | fix2 | dv}} 元</el-col>
+                  </el-row>
+                  <el-button slot="reference" type="text" size="small" >更多费用</el-button>
+                </el-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'useInfo'">
+              <div v-if="d.row.duration != null">骑行时长：{{d.row.duration | dv}} 秒</div>
+              <div v-if="d.row.distance != null">骑行距离：{{d.row.distance | fix2 | dv}} 米</div>
+              <div v-if="d.row.startTime != null">开始时间：{{d.row.startTime | dv}}</div>
+              <div v-if="d.row.endTime != null">结束时间：{{d.row.endTime | dv}}</div>
+            </template>
+            <template v-else-if="column.key === 'device'">
+              <div v-if="d.row.deviceSn != null">SN：{{d.row.deviceSn | dv}}</div>
+              <div v-if="d.row.deviceMac != null">MAC：{{d.row.deviceMac | dv}}</div>
+              <div v-if="d.row.deviceVehicleNum != null">车牌：{{d.row.deviceVehicleNum | dv}}</div>
+            </template>
+            <template v-else>
+              {{d.row[column.key]}}
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+      <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-view"
+            @click="handleView(scope.row)"
+            v-has-permi="['bst:order:query']"
+          >详情</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 } from "@/api/bst/order";
+import { $showColumns } from '@/utils/mixins';
+import FormCol from "@/components/FormCol/index.vue";
+
+  // 默认排序字段
+const defaultSort = {
+  prop: "createTime",
+  order: "descending"
+}
+
+export default {
+  name: "Order",
+  mixins: [$showColumns],
+  dicts: ['order_status', 'order_type', 'order_return_type', 'order_return_mode', 'suit_rental_unit', 'suit_riding_rule'],
+  components: {FormCol},
+  data() {
+    return {
+      span: 24,
+      // 字段列表
+      columns: [
+        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
+        {key: 'no', visible: true, label: '订单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
+        {key: 'suitName', visible: true, label: '套餐', minWidth: "200", sortable: true, overflow: false, align: 'left', width: null},
+        {key: 'device', visible: true, label: '设备详情', minWidth: "150", sortable: false, overflow: false, align: 'left', width: null},
+        {key: 'totalFee', visible: true, label: '费用详情', minWidth: "300", sortable: false, overflow: false, align: 'left', width: null},
+        {key: 'useInfo', visible: true, label: '使用详情', minWidth: "150", sortable: false, overflow: false, align: 'left', width: null},
+        {key: 'createTime', visible: true, label: '时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
+        {key: 'areaName', visible: true, label: '运营区', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'userName', visible: true, label: '用户', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'payNo', visible: true, label: '支付单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'returnType', visible: true, label: '还车类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'returnMode', visible: true, label: '还车定位', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'mark', visible: false, label: '备注', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+      ],
+      // 排序方式
+      orderSorts: ['ascending', 'descending', null],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 订单表格数据
+      orderList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      defaultSort,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        orderByColumn: defaultSort.prop,
+        isAsc: defaultSort.order,
+        id: null,
+        no: null,
+        type: null,
+        areaId: null,
+        userId: null,
+        deviceId: null,
+        deviceMac: null,
+        deviceSn: null,
+        payId: null,
+        mark: null,
+        status: null,
+        returnType: null,
+        suitId: null,
+        suitRentalUnit: null,
+        suitRidingRule: null,
+        returnMode: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        no: [
+          { required: true, message: "订单号不能为空", trigger: "blur" }
+        ],
+        type: [
+          { required: true, message: "类型不能为空", trigger: "change" }
+        ],
+        areaId: [
+          { required: true, message: "运营区ID不能为空", trigger: "blur" }
+        ],
+        userId: [
+          { required: true, message: "用户ID不能为空", trigger: "blur" }
+        ],
+        deviceId: [
+          { required: true, message: "设备ID不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+        suitId: [
+          { required: true, message: "套餐ID不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    handleView(row) {
+      // TODO
+    },
+    /** 当排序按钮被点击时触发 **/
+    onSortChange(column) {
+      if (column.order == null) {
+        this.queryParams.orderByColumn = defaultSort.prop;
+        this.queryParams.isAsc = defaultSort.order;
+      } else {
+        this.queryParams.orderByColumn = column.prop;
+        this.queryParams.isAsc = column.order;
+      }
+      this.getList();
+    },
+    /** 查询订单列表 */
+    getList() {
+      this.loading = true;
+      listOrder(this.queryParams).then(response => {
+        this.orderList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        no: null,
+        type: null,
+        areaId: null,
+        userId: null,
+        deviceId: null,
+        deviceMac: null,
+        deviceSn: null,
+        payId: null,
+        totalFee: null,
+        depositFee: null,
+        dispatchFee: null,
+        manageFee: null,
+        ridingFee: null,
+        deductionFee: null,
+        mark: null,
+        duration: null,
+        distance: null,
+        status: null,
+        createTime: null,
+        startTime: null,
+        endTime: null,
+        returnType: null,
+        videoUrl: null,
+        videoTime: null,
+        audioFiles: null,
+        suitId: null,
+        suitFreeRideTime: null,
+        suitRentalUnit: null,
+        suitRidingRule: null,
+        suitStartRule: null,
+        returnMode: null,
+        suitIntervalRule: null,
+        returnLon: null,
+        returnLat: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    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.open = true;
+        this.title = "修改订单";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          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(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('bst/order/export', {
+        ...this.queryParams
+      }, `order_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>