车辆轨迹
This commit is contained in:
磷叶
parent
591593b5af
commit
c1afcbf2bc
|
|
@ -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 }
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
44
src/api/bst/locationLog.js
Normal file
44
src/api/bst/locationLog.js
Normal file
|
|
@ -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'
|
||||
})
|
||||
}
|
||||
44
src/api/bst/order.js
Normal file
44
src/api/bst/order.js
Normal file
|
|
@ -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'
|
||||
})
|
||||
}
|
||||
117
src/views/bst/locationLog/components/LocationLogViewDialog.vue
Normal file
117
src/views/bst/locationLog/components/LocationLogViewDialog.vue
Normal file
|
|
@ -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>
|
||||
330
src/views/bst/locationLog/index.vue
Normal file
330
src/views/bst/locationLog/index.vue
Normal file
|
|
@ -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>
|
||||
474
src/views/bst/order/index.vue
Normal file
474
src/views/bst/order/index.vue
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user