车辆轨迹
This commit is contained in:
磷叶
parent
1dc3ca3c25
commit
d7c6e93a2b
|
|
@ -10,7 +10,7 @@ export function listAreaSub(query) {
|
|||
}
|
||||
|
||||
// 根据运营区ID查询子区域列表
|
||||
export function listByAreaId(query) {
|
||||
export function listAreaSubByAreaId(query) {
|
||||
return request({
|
||||
url: '/bst/areaSub/listByAreaId',
|
||||
method: 'get',
|
||||
|
|
|
|||
44
src/api/bst/commandLog.js
Normal file
44
src/api/bst/commandLog.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询命令日志列表
|
||||
export function listCommandLog(query) {
|
||||
return request({
|
||||
url: '/bst/commandLog/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询命令日志详细
|
||||
export function getCommandLog(id) {
|
||||
return request({
|
||||
url: '/bst/commandLog/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增命令日志
|
||||
export function addCommandLog(data) {
|
||||
return request({
|
||||
url: '/bst/commandLog',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改命令日志
|
||||
export function updateCommandLog(data) {
|
||||
return request({
|
||||
url: '/bst/commandLog',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除命令日志
|
||||
export function delCommandLog(id) {
|
||||
return request({
|
||||
url: '/bst/commandLog/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
|
@ -9,6 +9,15 @@ export function listLocationLog(query) {
|
|||
})
|
||||
}
|
||||
|
||||
// 查询全部，不分页
|
||||
export function listAllLocation(query) {
|
||||
return request({
|
||||
url: '/bst/locationLog/listAll',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询定位日志详细
|
||||
export function getLocationLog(id) {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -61,6 +61,16 @@
|
|||
<form-col :span="span" label="运营区外断电" prop="areaOutOutage" label-width="8em" tip="开启后，当超出运营区后将断电">
|
||||
<el-switch v-model="form.areaOutOutage" active-text="断电" inactive-text="不断电"/>
|
||||
</form-col>
|
||||
<form-col :span="span" label="边界播报距离" prop="boundaryDistance" label-width="8em" tip="当车辆靠近边界时,将播报提醒">
|
||||
<el-input v-model="form.boundaryDistance" placeholder="请输入边界播报距离" type="number">
|
||||
<template #append>米</template>
|
||||
</el-input>
|
||||
</form-col>
|
||||
<form-col :span="span" label="出界断电距离" prop="outageDistance" label-width="8em" tip="当车辆超出运营区此距离后将断电">
|
||||
<el-input v-model="form.outageDistance" placeholder="请输入运营区外断电距离" type="number">
|
||||
<template #append>米</template>
|
||||
</el-input>
|
||||
</form-col>
|
||||
</el-row>
|
||||
</collapse-panel>
|
||||
<collapse-panel title="还车设置" :value="true">
|
||||
|
|
@ -219,6 +229,8 @@ export default {
|
|||
guideSwitch: null,
|
||||
createId: null,
|
||||
createTime: null,
|
||||
boundaryDistance: 20,
|
||||
outageDistance: 20,
|
||||
// vo
|
||||
userName: this.nickName,
|
||||
};
|
||||
|
|
|
|||
84
src/views/bst/areaSub/components/AreaMap.js
Normal file
84
src/views/bst/areaSub/components/AreaMap.js
Normal file
File diff suppressed because one or more lines are too long
26
src/views/bst/areaSub/components/AreaMap.scss
Normal file
26
src/views/bst/areaSub/components/AreaMap.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
|
||||
// 信息窗体样式
|
||||
.map-info-window {
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.info-action {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #66b1ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,14 +6,82 @@
|
|||
<!-- 地图工具栏 -->
|
||||
<div class="map-tools">
|
||||
<el-button-group>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="startBoundaryEdit(null)" :disabled="isEditing">新增区域</el-button>
|
||||
<el-button size="mini" type="warning" icon="el-icon-edit" @click="startAreaBoundaryEdit" :disabled="isEditing">修改运营区</el-button>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="startBoundaryEdit(null)" v-if="enableEdit" :disabled="isEditing">新增区域</el-button>
|
||||
<el-button size="mini" type="warning" icon="el-icon-edit" @click="startAreaBoundaryEdit" v-if="enableEdit" :disabled="isEditing">修改运营区</el-button>
|
||||
<el-button size="mini" icon="el-icon-full-screen" @click="setFitView">全局查看</el-button>
|
||||
<el-button size="mini" icon="el-icon-picture" @click="toggleMapStyle">切换样式</el-button>
|
||||
<el-button size="mini" icon="el-icon-document" @click="toggleLabels">{{ showLabels ? '隐藏' : '显示' }}文字</el-button>
|
||||
<el-button size="mini" icon="el-icon-video-play" @click="togglePlaybackPanel">{{ isPlaybackVisible ? '隐藏' : '显示' }}轨迹控制台</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<!-- 轨迹回放控制面板 -->
|
||||
<el-card class="playback-panel" v-if="isPlaybackVisible && locationLogList.length > 0" header="轨迹控制台">
|
||||
<el-row class="device-info">
|
||||
<el-col :span="24" class="info-item">
|
||||
<span class="label">时间：</span>
|
||||
<span class="value">{{ currentLog ? currentLog.at : '-' }}</span>
|
||||
</el-col>
|
||||
<el-col :span="24" class="info-item">
|
||||
<span class="label">位置：</span>
|
||||
<span class="value">{{ currentLog ? `${currentLog.longitude}, ${currentLog.latitude}` : '-' }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" class="info-item">
|
||||
<span class="label">速度：</span>
|
||||
<span class="value">{{ currentSpeed }} km/h</span>
|
||||
</el-col>
|
||||
<el-col :span="12" class="info-item">
|
||||
<span class="label">电压：</span>
|
||||
<span class="value">{{ currentLog ? currentLog.voltage + 'V' : '-' }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" class="info-item">
|
||||
<span class="label">信号：</span>
|
||||
<span class="value">{{ currentLog ? currentLog.signal : '-' }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" class="info-item">
|
||||
<span class="label">卫星：</span>
|
||||
<span class="value">{{ currentLog ? currentLog.satellites : '-' }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" class="info-item">
|
||||
<span class="label">状态：</span>
|
||||
<span class="value"><dict-tag :options="dict.type.device_status" :value="currentLog.status" size="mini"/></span>
|
||||
</el-col>
|
||||
<el-col :span="12" class="info-item">
|
||||
<span class="label">锁状态：</span>
|
||||
<span class="value"><dict-tag :options="dict.type.device_lock_status" :value="currentLog.lockStatus" size="mini"/></span>
|
||||
</el-col>
|
||||
<el-col :span="12" class="info-item">
|
||||
<span class="label">电门：</span>
|
||||
<span class="value"><dict-tag :options="dict.type.device_quality" :value="currentLog.quality" size="mini"/></span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="playback-controls">
|
||||
<el-slider
|
||||
v-model="currentLogIndex"
|
||||
:max="locationLogList.length - 1"
|
||||
:show-tooltip="false"
|
||||
@input="handleSliderChange">
|
||||
</el-slider>
|
||||
|
||||
<div class="control-buttons">
|
||||
<el-button-group>
|
||||
<el-button size="mini" :icon="isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'" @click="togglePlay">
|
||||
{{ isPlaying ? '暂停' : '播放' }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-for="speed in [1, 2, 4, 8]"
|
||||
:key="speed"
|
||||
size="mini"
|
||||
:type="playbackSpeed === speed ? 'primary' : ''"
|
||||
@click="setPlaybackSpeed(speed)">
|
||||
{{ speed }}x
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 编辑工具栏 -->
|
||||
<div class="boundary-tools" v-if="isEditing">
|
||||
<el-alert type="info" :closable="false">
|
||||
|
|
@ -34,85 +102,36 @@
|
|||
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { AreaSubType, AreaSubStatus } from "@/utils/enums";
|
||||
import { debounce } from "@/utils/index";
|
||||
import { AreaSubStatus } from "@/utils/enums";
|
||||
import { debounce, isEmpty } from "@/utils/index";
|
||||
import globalConfig from "@/utils/config/globalConfig";
|
||||
// 区域样式配置
|
||||
const AREA_STYLES = {
|
||||
[AreaSubType.PARKING]: {
|
||||
strokeColor: '#1890ff',
|
||||
strokeWeight: 2,
|
||||
fillColor: '#1890ff',
|
||||
fillOpacity: 0.3,
|
||||
strokeStyle: 'solid'
|
||||
},
|
||||
[AreaSubType.NO_PARKING]: {
|
||||
strokeColor: '#ff4d4f',
|
||||
strokeWeight: 2,
|
||||
fillColor: '#ff4d4f',
|
||||
fillOpacity: 0.3,
|
||||
strokeStyle: 'solid'
|
||||
},
|
||||
[AreaSubType.NO_RIDE]: {
|
||||
strokeColor: '#faad14',
|
||||
strokeWeight: 2,
|
||||
fillColor: '#faad14',
|
||||
fillOpacity: 0.3,
|
||||
strokeStyle: 'solid'
|
||||
}
|
||||
};
|
||||
|
||||
// 高亮样式
|
||||
const HIGHLIGHT_STYLES = {
|
||||
hover: {
|
||||
strokeWeight: 3,
|
||||
fillOpacity: 0.5
|
||||
},
|
||||
selected: {
|
||||
strokeWeight: 4,
|
||||
fillOpacity: 0.6
|
||||
}
|
||||
};
|
||||
|
||||
// 图标配置
|
||||
const MARKER_ICONS = {
|
||||
[AreaSubType.PARKING]: 'https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh',
|
||||
[AreaSubType.NO_PARKING]: 'https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab',
|
||||
[AreaSubType.NO_RIDE]: 'https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2'
|
||||
};
|
||||
|
||||
// 标签样式配置
|
||||
const LABEL_STYLES = {
|
||||
[AreaSubType.PARKING]: {
|
||||
backgroundColor: '#1890ff',
|
||||
color: '#fff'
|
||||
},
|
||||
[AreaSubType.NO_PARKING]: {
|
||||
backgroundColor: '#ff4d4f',
|
||||
color: '#fff'
|
||||
},
|
||||
[AreaSubType.NO_RIDE]: {
|
||||
backgroundColor: '#faad14',
|
||||
color: '#fff'
|
||||
}
|
||||
};
|
||||
import { AREA_STYLES, HIGHLIGHT_STYLES, MARKER_ICONS, LABEL_STYLES, DEVICE_STATUS_ICONS } from "@/views/bst/areaSub/components/AreaMap";
|
||||
|
||||
export default {
|
||||
name: 'AreaMap',
|
||||
|
||||
dicts: ['device_status', 'device_lock_status', 'device_quality'],
|
||||
props: {
|
||||
// 运营区域信息
|
||||
area: {
|
||||
type: Object,
|
||||
required: true
|
||||
default: () => {}
|
||||
},
|
||||
// 子区域列表
|
||||
areaSubList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 定位日志列表
|
||||
locationLogList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 开启编辑
|
||||
enableEdit: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
|
|
@ -131,7 +150,18 @@ export default {
|
|||
},
|
||||
currentInfoWindow: null,
|
||||
highlightedAreaId: null, // 当前鼠标悬停的区域ID
|
||||
selectedAreaId: null // 当前选中的区域ID
|
||||
selectedAreaId: null, // 当前选中的区域ID
|
||||
isPlaybackVisible: false,
|
||||
currentLogIndex: 0,
|
||||
currentSpeed: 0,
|
||||
isPlaying: false,
|
||||
playbackSpeed: 1,
|
||||
playbackTimer: null,
|
||||
currentPolyline: null,
|
||||
currentDeviceMarker: null,
|
||||
currentLog: null,
|
||||
sortedLocationLogs: [],
|
||||
progressPolyline: null,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -172,7 +202,16 @@ export default {
|
|||
this.updateAreaStyle(newVal);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听播放状态
|
||||
isPlaying(newVal) {
|
||||
if (newVal) {
|
||||
this.startPlayback();
|
||||
} else {
|
||||
this.pausePlayback();
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
|
|
@ -181,6 +220,16 @@ export default {
|
|||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.pausePlayback();
|
||||
if (this.currentPolyline) {
|
||||
this.map.remove(this.currentPolyline);
|
||||
}
|
||||
if (this.currentDeviceMarker) {
|
||||
if (this.currentDeviceMarker.snLabel) {
|
||||
this.map.remove(this.currentDeviceMarker.snLabel);
|
||||
}
|
||||
this.map.remove(this.currentDeviceMarker);
|
||||
}
|
||||
this.destroyMap();
|
||||
},
|
||||
|
||||
|
|
@ -196,8 +245,8 @@ export default {
|
|||
|
||||
// 使用 area 的经纬度作为中心点
|
||||
const center = [
|
||||
this.area.longitude || 120.35218, // 如果没有经度，使用默认值
|
||||
this.area.latitude || 26.944335 // 如果没有纬度，使用默认值
|
||||
this.area?.longitude || 120.35218, // 如果没有经度，使用默认值
|
||||
this.area?.latitude || 26.944335 // 如果没有纬度，使用默认值
|
||||
];
|
||||
|
||||
this.map = new this.AMap.Map('container', {
|
||||
|
|
@ -242,25 +291,22 @@ export default {
|
|||
this.clearOverlays();
|
||||
this.renderAreaBoundary();
|
||||
this.renderSubAreas();
|
||||
this.initPlayback();
|
||||
},
|
||||
|
||||
// 清除编辑器
|
||||
clearEditor() {
|
||||
|
||||
// 关闭编辑器
|
||||
if (this.polygonEditor) {
|
||||
// 清除编辑器的目标对象
|
||||
this.polygonEditor.setTarget();
|
||||
}
|
||||
|
||||
// 移除编辑中的多边形
|
||||
if (this.editingPolygon) {
|
||||
this.map.remove(this.editingPolygon);
|
||||
this.editingPolygon = null;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// 渲染运营区边界
|
||||
renderAreaBoundary() {
|
||||
if (!this.map || !this.area.boundaryStr) {
|
||||
|
|
@ -288,7 +334,6 @@ export default {
|
|||
|
||||
// 渲染子区域
|
||||
renderSubAreas() {
|
||||
|
||||
if (!this.map || !this.areaSubList.length) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -398,7 +443,9 @@ export default {
|
|||
|
||||
// 显示信息窗体
|
||||
showInfoWindow(subArea, focus = false) {
|
||||
console.log("showInfoWindow", this.isEditing);
|
||||
if (!this.enableEdit) {
|
||||
return;
|
||||
}
|
||||
if (this.currentInfoWindow) {
|
||||
this.currentInfoWindow.close();
|
||||
}
|
||||
|
|
@ -765,7 +812,216 @@ export default {
|
|||
|
||||
this.map.on('click', clickHandler);
|
||||
this.map.on('rightclick', rightClickHandler);
|
||||
}
|
||||
},
|
||||
togglePlaybackPanel() {
|
||||
this.isPlaybackVisible = !this.isPlaybackVisible;
|
||||
},
|
||||
handleSliderChange(index) {
|
||||
this.currentLogIndex = index;
|
||||
this.updateCurrentLog();
|
||||
},
|
||||
togglePlay() {
|
||||
this.isPlaying = !this.isPlaying;
|
||||
},
|
||||
setPlaybackSpeed(speed) {
|
||||
this.playbackSpeed = speed;
|
||||
// 如果正在播放，立即应用新的速度
|
||||
if (this.isPlaying) {
|
||||
this.pausePlayback();
|
||||
this.startPlayback();
|
||||
}
|
||||
},
|
||||
updateCurrentLog() {
|
||||
if (this.sortedLocationLogs.length === 0) return;
|
||||
|
||||
this.currentLog = this.sortedLocationLogs[this.currentLogIndex];
|
||||
this.currentSpeed = this.currentLog.speed;
|
||||
|
||||
this.updateDeviceMarker();
|
||||
},
|
||||
calculateDistance(lat1, lon1, lat2, lon2) {
|
||||
if (this.AMap) {
|
||||
const start = new this.AMap.LngLat(lon1, lat1);
|
||||
const end = new this.AMap.LngLat(lon2, lat2);
|
||||
return start.distance(end);
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
updateDeviceMarker() {
|
||||
if (!this.currentLog) return;
|
||||
|
||||
const position = [this.currentLog.longitude, this.currentLog.latitude];
|
||||
|
||||
if (this.currentDeviceMarker) {
|
||||
this.currentDeviceMarker.setPosition(position);
|
||||
} else {
|
||||
// 创建设备标记
|
||||
this.currentDeviceMarker = new this.AMap.Marker({
|
||||
position: position,
|
||||
offset: new this.AMap.Pixel(-16, -36),
|
||||
icon: new this.AMap.Icon({
|
||||
image: DEVICE_STATUS_ICONS[this.currentLog.status],
|
||||
size: new this.AMap.Size(32, 36),
|
||||
imageSize: new this.AMap.Size(32, 36),
|
||||
anchor: 'bottom-center'
|
||||
})
|
||||
});
|
||||
|
||||
// 创建SN标签
|
||||
const snLabel = new this.AMap.Text({
|
||||
text: `${this.currentLog.sn}`,
|
||||
position: position,
|
||||
offset: new this.AMap.Pixel(0, -50), // 调整位置到marker上方
|
||||
anchor: 'center',
|
||||
style: {
|
||||
background: '#fff',
|
||||
border: '1px solid #409EFF',
|
||||
borderRadius: '4px',
|
||||
padding: '2px 8px',
|
||||
color: '#409EFF',
|
||||
fontSize: '12px',
|
||||
whiteSpace: 'nowrap',
|
||||
textAlign: 'center',
|
||||
boxShadow: '0 2px 6px rgba(0,0,0,0.1)'
|
||||
}
|
||||
});
|
||||
|
||||
this.map.add([this.currentDeviceMarker, snLabel]);
|
||||
// 保存snLabel引用以便后续更新
|
||||
this.currentDeviceMarker.snLabel = snLabel;
|
||||
}
|
||||
|
||||
// 更新图标
|
||||
this.currentDeviceMarker.setIcon(new this.AMap.Icon({
|
||||
image: DEVICE_STATUS_ICONS[this.currentLog.status],
|
||||
size: new this.AMap.Size(32, 36),
|
||||
imageSize: new this.AMap.Size(32, 36),
|
||||
anchor: 'bottom-center'
|
||||
}));
|
||||
|
||||
// 更新SN标签位置
|
||||
if (this.currentDeviceMarker.snLabel) {
|
||||
this.currentDeviceMarker.snLabel.setPosition(position);
|
||||
}
|
||||
|
||||
// 更新进度轨迹
|
||||
this.updateProgressTrajectory();
|
||||
},
|
||||
drawTrajectory() {
|
||||
if (this.currentPolyline) {
|
||||
this.map.remove(this.currentPolyline);
|
||||
}
|
||||
if (this.progressPolyline) {
|
||||
this.map.remove(this.progressPolyline);
|
||||
}
|
||||
|
||||
const path = this.sortedLocationLogs.map(log => [log.longitude, log.latitude]);
|
||||
|
||||
// 绘制完整轨迹
|
||||
this.currentPolyline = new this.AMap.Polyline({
|
||||
path: path,
|
||||
strokeColor: '#409EFF',
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.4,
|
||||
showDir: true
|
||||
});
|
||||
|
||||
// 绘制进度轨迹
|
||||
this.progressPolyline = new this.AMap.Polyline({
|
||||
path: [],
|
||||
strokeColor: '#67C23A',
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.8,
|
||||
showDir: true
|
||||
});
|
||||
|
||||
this.map.add([this.currentPolyline, this.progressPolyline]);
|
||||
this.map.setFitView([this.currentPolyline]);
|
||||
},
|
||||
updateProgressTrajectory() {
|
||||
if (!this.progressPolyline || this.currentLogIndex < 0) return;
|
||||
|
||||
const progressPath = this.sortedLocationLogs
|
||||
.slice(0, this.currentLogIndex + 1)
|
||||
.map(log => [log.longitude, log.latitude]);
|
||||
|
||||
this.progressPolyline.setPath(progressPath);
|
||||
},
|
||||
// 初始化轨迹播放
|
||||
initPlayback() {
|
||||
// 清除现有轨迹和设备标记
|
||||
if (this.currentPolyline) {
|
||||
this.map.remove(this.currentPolyline);
|
||||
this.currentPolyline = null;
|
||||
}
|
||||
if (this.progressPolyline) {
|
||||
this.map.remove(this.progressPolyline);
|
||||
this.progressPolyline = null;
|
||||
}
|
||||
if (this.currentDeviceMarker) {
|
||||
if (this.currentDeviceMarker.snLabel) {
|
||||
this.map.remove(this.currentDeviceMarker.snLabel);
|
||||
}
|
||||
this.map.remove(this.currentDeviceMarker);
|
||||
this.currentDeviceMarker = null;
|
||||
}
|
||||
|
||||
if (isEmpty(this.locationLogList)) {
|
||||
this.sortedLocationLogs = [];
|
||||
this.currentLogIndex = 0;
|
||||
this.currentLog = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// 按时间排序日志并预计算速度
|
||||
this.sortedLocationLogs = [...this.locationLogList]
|
||||
.sort((a, b) => new Date(a.at).getTime() - new Date(b.at).getTime())
|
||||
.map((log, index, array) => {
|
||||
if (index === 0) {
|
||||
log.speed = 0;
|
||||
} else {
|
||||
const prevLog = array[index - 1];
|
||||
const prevTime = new Date(prevLog.at).getTime();
|
||||
const currentTime = new Date(log.at).getTime();
|
||||
const timeDiff = (currentTime - prevTime) / 1000; // 转换为秒
|
||||
|
||||
if (timeDiff === 0) {
|
||||
log.speed = 0;
|
||||
} else {
|
||||
const distance = this.calculateDistance(
|
||||
prevLog.latitude, prevLog.longitude,
|
||||
log.latitude, log.longitude
|
||||
);
|
||||
log.speed = Number(((distance / timeDiff) * 3.6).toFixed(1)); // 转换为km/h并保留一位小数
|
||||
}
|
||||
}
|
||||
return log;
|
||||
});
|
||||
|
||||
this.currentLogIndex = 0;
|
||||
this.updateCurrentLog();
|
||||
this.drawTrajectory();
|
||||
},
|
||||
startPlayback() {
|
||||
if (this.playbackTimer) {
|
||||
clearInterval(this.playbackTimer);
|
||||
}
|
||||
|
||||
this.playbackTimer = setInterval(() => {
|
||||
if (this.currentLogIndex >= this.sortedLocationLogs.length - 1) {
|
||||
this.currentLogIndex = 0;
|
||||
} else {
|
||||
this.currentLogIndex++;
|
||||
}
|
||||
this.updateCurrentLog();
|
||||
}, 1000 / this.playbackSpeed);
|
||||
},
|
||||
pausePlayback() {
|
||||
if (this.playbackTimer) {
|
||||
clearInterval(this.playbackTimer);
|
||||
this.playbackTimer = null;
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -800,35 +1056,59 @@ export default {
|
|||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.playback-panel {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 15px;
|
||||
transform: none;
|
||||
z-index: 100;
|
||||
width: 400px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.device-info {
|
||||
padding: 8px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
|
||||
.info-item {
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
|
||||
.label {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playback-controls {
|
||||
.el-slider {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
|
||||
.el-button {
|
||||
padding: 7px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
// 信息窗体样式
|
||||
.map-info-window {
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.info-action {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #66b1ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "@/views/bst/areaSub/components/AreaMap.scss";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { listByAreaId, delAreaSub, updateAreaSub } from "@/api/bst/areaSub";
|
||||
import { listAreaSubByAreaId, delAreaSub, updateAreaSub } from "@/api/bst/areaSub";
|
||||
import { $showColumns } from '@/utils/mixins';
|
||||
import FormCol from "@/components/FormCol/index.vue";
|
||||
import { getArea, updateArea } from '@/api/bst/area';
|
||||
|
|
@ -336,7 +336,7 @@ export default {
|
|||
/** 查询子区域列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listByAreaId(this.queryParams).then(response => {
|
||||
listAreaSubByAreaId(this.queryParams).then(response => {
|
||||
this.areaSubList = response.data;
|
||||
this.loading = false;
|
||||
});
|
||||
|
|
|
|||
310
src/views/bst/commandLog/index.vue
Normal file
310
src/views/bst/commandLog/index.vue
Normal file
|
|
@ -0,0 +1,310 @@
|
|||
<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="发送原因" prop="reason">
|
||||
<el-input
|
||||
v-model="queryParams.reason"
|
||||
placeholder="请输入发送命令的原因"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="命令" prop="command">
|
||||
<el-input
|
||||
v-model="queryParams.command"
|
||||
placeholder="请输入命令"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果" prop="result">
|
||||
<el-input
|
||||
v-model="queryParams.result"
|
||||
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>
|
||||
<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:commandLog:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="commandLogList" @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 === 'type'">
|
||||
<dict-tag :value="d.row.type" :options="dict.type.command_log_type"/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{d.row[column.key]}}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listCommandLog, getCommandLog, delCommandLog, addCommandLog, updateCommandLog } from "@/api/bst/commandLog";
|
||||
import { $showColumns } from '@/utils/mixins';
|
||||
import FormCol from "@/components/FormCol/index.vue";
|
||||
|
||||
// 默认排序字段
|
||||
const defaultSort = {
|
||||
prop: "operaTime",
|
||||
order: "descending"
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "CommandLog",
|
||||
mixins: [$showColumns],
|
||||
components: {FormCol},
|
||||
dicts: ['command_log_type'],
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
span: 24,
|
||||
// 字段列表
|
||||
columns: [
|
||||
{key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: '80'},
|
||||
{key: 'type', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'mac', visible: true, label: 'MAC', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'reason', visible: true, label: '原因', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'command', visible: true, label: '命令', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'result', visible: true, label: '结果', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'userId', visible: false, label: '操作人ID', 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: 'operaTime', visible: true, label: '时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: null},
|
||||
],
|
||||
// 排序方式
|
||||
orderSorts: ['ascending', 'descending', null],
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 命令日志表格数据
|
||||
commandLogList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
defaultSort,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
orderByColumn: defaultSort.prop,
|
||||
isAsc: defaultSort.order,
|
||||
id: null,
|
||||
type: null,
|
||||
mac: null,
|
||||
reason: null,
|
||||
command: null,
|
||||
result: null,
|
||||
userId: null,
|
||||
userName: null,
|
||||
iotCode: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
type: [
|
||||
{ required: true, message: "类型不能为空", trigger: "change" }
|
||||
],
|
||||
mac: [
|
||||
{ required: true, message: "MAC号不能为空", trigger: "blur" }
|
||||
],
|
||||
operaTime: [
|
||||
{ required: true, message: "操作时间不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
Object.assign(this.queryParams, this.query);
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 当排序按钮被点击时触发 **/
|
||||
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;
|
||||
listCommandLog(this.queryParams).then(response => {
|
||||
this.commandLogList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
type: null,
|
||||
mac: null,
|
||||
reason: null,
|
||||
command: null,
|
||||
result: null,
|
||||
userId: null,
|
||||
userName: null,
|
||||
operaTime: null,
|
||||
iotCode: 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
|
||||
getCommandLog(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) {
|
||||
updateCommandLog(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addCommandLog(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 delCommandLog(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('bst/commandLog/export', {
|
||||
...this.queryParams
|
||||
}, `commandLog_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
192
src/views/bst/device/view/components/DeviceLocation.vue
Normal file
192
src/views/bst/device/view/components/DeviceLocation.vue
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
<template>
|
||||
<el-row :gutter="10" v-loading="loading">
|
||||
<el-col :span="18">
|
||||
<area-map
|
||||
ref="map"
|
||||
style="height: 500px"
|
||||
:area="area"
|
||||
:area-sub-list="areaSubList"
|
||||
:location-log-list="locationLogList"
|
||||
:enable-edit="false"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-date-picker
|
||||
v-model="queryParams.timeRange"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
size="mini"
|
||||
:clearable="false"
|
||||
@change="getLocationLogList"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
<div class="location-log-list">
|
||||
<div
|
||||
@click="handleLogClick(log, index)"
|
||||
v-for="(log, index) in locationLogList"
|
||||
:key="index"
|
||||
class="log-item"
|
||||
>
|
||||
<div class="log-time">{{ log.at }}</div>
|
||||
<div class="log-info">
|
||||
<span class="info-item">
|
||||
<i class="el-icon-location"></i>
|
||||
{{ log.longitude.toFixed(6) }}, {{ log.latitude.toFixed(6) }}
|
||||
</span>
|
||||
<span class="info-item">
|
||||
<i class="el-icon-odometer"></i>
|
||||
{{ log.voltage }}V
|
||||
</span>
|
||||
<span class="info-item">
|
||||
{{ log.sn }}
|
||||
<dict-tag :options="dict.type.device_status" :value="log.status" size="mini"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-if="!locationLogList || locationLogList.length === 0" description="暂无数据" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AreaMap from '@/views/bst/areaSub/components/AreaMap.vue';
|
||||
import { listAreaSubByAreaId } from '@/api/bst/areaSub';
|
||||
import { listAllLocation } from '@/api/bst/locationLog';
|
||||
import { getArea } from '@/api/bst/area';
|
||||
import { parseTime } from '@/utils/ruoyi.js';
|
||||
|
||||
export default {
|
||||
name: 'DeviceLocation',
|
||||
dicts: ['device_status', 'device_lock_status', 'device_quality'],
|
||||
components: {
|
||||
AreaMap
|
||||
},
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
areaId: {
|
||||
type: String,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
area: {},
|
||||
areaSubList: [],
|
||||
locationLogList: [],
|
||||
queryParams: {
|
||||
timeRange: [parseTime(new Date(), '{y}-{m}-{d} 00:00:00'), parseTime(new Date(), '{y}-{m}-{d} 23:59:59')]
|
||||
},
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getArea();
|
||||
this.getAreaSubList();
|
||||
this.getLocationLogList();
|
||||
},
|
||||
methods: {
|
||||
// 获取运营区域
|
||||
getArea() {
|
||||
getArea(this.areaId).then(res => {
|
||||
this.area = res.data;
|
||||
this.getAreaSubList();
|
||||
});
|
||||
},
|
||||
// 获取子区域列表
|
||||
getAreaSubList() {
|
||||
listAreaSubByAreaId({ areaId: this.areaId }).then(res => {
|
||||
this.areaSubList = res.data;
|
||||
});
|
||||
},
|
||||
// 获取定位日志列表
|
||||
getLocationLogList() {
|
||||
Object.assign(this.queryParams, this.query);
|
||||
this.loading = true;
|
||||
listAllLocation(this.queryParams).then(res => {
|
||||
this.locationLogList = res.data;
|
||||
if (this.$refs.map) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.map.initPlayback();
|
||||
});
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 点击日志
|
||||
handleLogClick(log, index) {
|
||||
if (this.$refs.map) {
|
||||
this.$nextTick(() => {
|
||||
// 地图播放到指定日志
|
||||
this.$refs.map.handleSliderChange(index);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.location-log-list {
|
||||
margin-top: 10px;
|
||||
height: calc(500px - 40px);
|
||||
overflow-y: auto;
|
||||
border: 1px solid #EBEEF5;
|
||||
border-radius: 4px;
|
||||
|
||||
.log-item {
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #F5F7FA;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.log-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
|
||||
.info-item {
|
||||
color: #606266;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #C0C4CC;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #F5F7FA;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -93,7 +93,10 @@
|
|||
<el-card class="box-card" v-if="detail.id">
|
||||
<el-tabs lazy>
|
||||
<el-tab-pane label="设备轨迹">
|
||||
<!-- TODO: 设备轨迹展示 -->
|
||||
<device-location :query="{ mac: detail.mac }" :area-id="detail.areaId" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="命令日志">
|
||||
<command-log :query="{ eqMac: detail.mac }" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="订单使用记录">
|
||||
<order-device :query="{ deviceId: id }" />
|
||||
|
|
@ -112,6 +115,8 @@ import BooleanTag from '@/components/BooleanTag/index.vue';
|
|||
import { DeviceStatus } from '@/utils/enums';
|
||||
import { $device } from '@/views/bst/device/mixins';
|
||||
import OrderDevice from '@/views/bst/orderDevice/index.vue';
|
||||
import DeviceLocation from '@/views/bst/device/view/components/DeviceLocation.vue';
|
||||
import CommandLog from '@/views/bst/commandLog/index.vue';
|
||||
|
||||
export default {
|
||||
name: 'DeviceView',
|
||||
|
|
@ -120,7 +125,9 @@ export default {
|
|||
components: {
|
||||
CollapsePanel,
|
||||
BooleanTag,
|
||||
OrderDevice
|
||||
OrderDevice,
|
||||
DeviceLocation,
|
||||
CommandLog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -135,6 +142,7 @@ export default {
|
|||
this.getDetail();
|
||||
},
|
||||
methods: {
|
||||
// 获取设备详情
|
||||
getDetail() {
|
||||
this.loading = true;
|
||||
getDevice(this.id).then(res => {
|
||||
|
|
@ -220,18 +228,15 @@ export default {
|
|||
},
|
||||
// 管理员刷新
|
||||
handleRefresh() {
|
||||
this.$confirm('是否确认刷新设备【' + this.detail.sn + '】？', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
refreshDevice({ id: this.detail.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success("操作成功，设备已刷新");
|
||||
this.getDetail();
|
||||
}
|
||||
})
|
||||
}).catch(() => {});
|
||||
this.loading = true;
|
||||
refreshDevice({ id: this.detail.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success("操作成功，设备已刷新");
|
||||
this.detail = res.data;
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 出仓
|
||||
handleOut() {
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
<el-descriptions-item label="开始时间">{{ detail.startTime | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="结束时间">{{ detail.endTime | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="到期时间">{{ detail.maxTime | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="骑行时长">{{ detail.duration | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="骑行距离">{{ detail.distance | fix2 | dv}} km</el-descriptions-item>
|
||||
<el-descriptions-item label="骑行时长">{{ detail.duration | dv}} 秒</el-descriptions-item>
|
||||
<el-descriptions-item label="骑行距离">{{ detail.distance | fix2 | dv}} 米</el-descriptions-item>
|
||||
<el-descriptions-item label="终止原因" :span="2">{{ detail.endReason || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="取消备注" :span="3">{{ detail.cancelRemark || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
|
@ -55,10 +55,10 @@
|
|||
<collapse-panel :value="true" title="归还信息">
|
||||
<el-descriptions :column="3" >
|
||||
<el-descriptions-item label="归还方式">
|
||||
<dict-tag :options="dict.type.order_return_mode" :value="detail.returnMode"/>
|
||||
<dict-tag :options="dict.type.order_return_mode" :value="detail.returnMode" size="small"/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="归还类型">
|
||||
<dict-tag :options="dict.type.order_return_type" :value="detail.returnType"/>
|
||||
<dict-tag :options="dict.type.order_return_type" :value="detail.returnType" size="small"/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="归还时间">{{ detail.endTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="归还经度" v-if="detail.returnLon">{{ detail.returnLon }}</el-descriptions-item>
|
||||
|
|
@ -94,15 +94,6 @@
|
|||
<el-descriptions-item label="支付超时时间">{{ detail.payExpireTime | dv}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</collapse-panel>
|
||||
|
||||
<collapse-panel :value="true" title="视频信息">
|
||||
<el-descriptions :column="1" >
|
||||
<el-descriptions-item label="视频链接">
|
||||
<el-link type="primary" :href="detail.videoUrl" target="_blank">查看视频</el-link>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="视频时间">{{ detail.videoTime }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</collapse-panel>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -110,7 +101,7 @@
|
|||
<el-card class="box-card" v-if="detail.id" style="margin-top: 10px;">
|
||||
<el-tabs lazy>
|
||||
<el-tab-pane label="车辆轨迹">
|
||||
// TODO
|
||||
<device-location :query="{orderId: detail.id}" :area-id="detail.areaId" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="收益信息">
|
||||
<bonus :query="{bstId: detail.id, bstType: BonusBstType.ORDER}" />
|
||||
|
|
@ -133,6 +124,7 @@ import {SuitRidingRule, PayBstType, BonusBstType} from '@/utils/enums'
|
|||
import OrderDevice from '@/views/bst/orderDevice/index.vue'
|
||||
import Pay from '@/views/bst/pay/index.vue'
|
||||
import Bonus from '@/views/bst/bonus/index.vue'
|
||||
import DeviceLocation from '@/views/bst/device/view/components/DeviceLocation.vue'
|
||||
|
||||
export default {
|
||||
name: 'OrderView',
|
||||
|
|
@ -141,7 +133,8 @@ export default {
|
|||
CollapsePanel,
|
||||
OrderDevice,
|
||||
Pay,
|
||||
Bonus
|
||||
Bonus,
|
||||
DeviceLocation
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -107,14 +107,16 @@
|
|||
<template v-if="column.key === 'id'">
|
||||
{{d.row[column.key]}}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'type'">
|
||||
<dict-tag :options="dict.type.order_device_type" :value="d.row[column.key]"/>
|
||||
<template v-else-if="column.key === 'deviceSn'">
|
||||
SN：{{d.row.deviceSn | dv}}
|
||||
<dict-tag :options="dict.type.order_device_type" :value="d.row.type" size="mini" style="margin-left: 4px;"/>
|
||||
<dict-tag :options="dict.type.order_device_status" :value="d.row.status" size="mini" style="margin-left: 4px;"/>
|
||||
<br/>
|
||||
MAC：{{d.row.deviceMac | dv}}
|
||||
车牌：{{d.row.deviceVehicleNum | dv}}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'reason'">
|
||||
<dict-tag :options="dict.type.order_device_reason" :value="d.row[column.key]"/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<dict-tag :options="dict.type.order_device_status" :value="d.row[column.key]"/>
|
||||
<dict-tag :options="dict.type.order_device_reason" :value="d.row[column.key]" size="mini"/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'finishPicture'">
|
||||
<image-preview :src="d.row[column.key]" :width="50" :height="50"/>
|
||||
|
|
@ -166,15 +168,11 @@ export default {
|
|||
// 字段列表
|
||||
columns: [
|
||||
{key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
|
||||
{key: 'deviceSn', visible: true, label: 'SN', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'deviceMac', visible: true, label: 'MAC', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'deviceVehicleNum', visible: true, label: '车牌号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'type', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'reason', visible: true, label: '换车原因', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'deviceSn', visible: true, label: 'SN', minWidth: "200", sortable: true, overflow: false, align: 'left', width: null},
|
||||
{key: 'orderNo', visible: true, label: '订单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: "180"},
|
||||
{key: 'startTime', visible: true, label: '开始时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: null},
|
||||
{key: 'endTime', visible: true, label: '结束时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: null},
|
||||
{key: 'reason', visible: true, label: '换车原因', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'deviceMchName', visible: true, label: '车辆归属', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'orderUserName', visible: true, label: '订单用户', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'finishPicture', visible: true, label: '还车图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user