Changes
wxy
parent
a90dd02fda
commit
1ec6cdc8d5
|
|
@ -36,11 +36,13 @@
|
|||
"url": "https://gitee.com/y_project/MuYu-Cloud.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.24.0",
|
||||
"clipboard": "2.0.8",
|
||||
"core-js": "3.25.3",
|
||||
"echarts": "5.4.0",
|
||||
"element-china-area-data": "^5.0.2",
|
||||
"element-ui": "2.15.14",
|
||||
"file-saver": "2.0.5",
|
||||
"fuse.js": "6.4.3",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,156 @@
|
|||
import request from "@/utils/request";
|
||||
|
||||
|
||||
export function listManager(query) {
|
||||
return request({
|
||||
url: '/vehicleManagement/vehicle/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getManagerId(id) {
|
||||
return request({
|
||||
url: '/vehicleManagement/vehicle/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function addManager(data) {
|
||||
return request({
|
||||
url: '/vehicleManagement/vehicle/add',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function updateManager(data) {
|
||||
return request({
|
||||
url: '/vehicleManagement/vehicle/edit',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function testMessage() {
|
||||
return request({
|
||||
url: '/vehicleManagement/messageInfo/test',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function delManager(id) {
|
||||
return request({
|
||||
url: '/vehicleManagement/vehicle/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
//----------------报---------
|
||||
export function listMessage(query) {
|
||||
return request({
|
||||
url: '/vehicleManagement/messageInfo/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getMessage(id) {
|
||||
return request({
|
||||
url: '/vehicleManagement/messageInfo/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function addMessage(data) {
|
||||
return request({
|
||||
url: '/vehicleManagement/messageInfo',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function updateMessageDetail(data) {
|
||||
return request({
|
||||
url: '/vehicleManagement/updateMessage',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function delMessage(id) {
|
||||
return request({
|
||||
url: '/vehicleManagement/messageInfo/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询车辆实时数据
|
||||
export function getDataByRedis(carVin) {
|
||||
return request({
|
||||
url: '/vehicleManagement/redis/getDataByRedis/' + carVin,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//提交报文
|
||||
export function submit(data) {
|
||||
return request({
|
||||
url: '/vehicleManagement/vehicleMessageMiddle/submit',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// --------------类型-----------
|
||||
// 查询车辆报文类型列表
|
||||
export function listMessageType(query) {
|
||||
return request({
|
||||
url: '/vehicleManagement/messageType/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询车辆报文类型详细
|
||||
export function getMessageType(messageCode) {
|
||||
return request({
|
||||
url: '/vehicleManagement/messageType/' + messageCode,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增车辆报文类型
|
||||
export function addMessageType(data) {
|
||||
return request({
|
||||
url: '/vehicleManagement/messageType',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改车辆报文类型
|
||||
export function updateMessageType(data) {
|
||||
return request({
|
||||
url: '/vehicleManagement/messageType',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除车辆报文类型
|
||||
export function delMessageType(id) {
|
||||
return request({
|
||||
url: '/vehicleManagement/messageType/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,279 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="dialogFormVisible = true"
|
||||
>
|
||||
添加模板
|
||||
</el-button>
|
||||
<el-tabs v-model="editableTabsValue" :tab-position="tabPosition" type="card" @tab-click="handleTabClick">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs "
|
||||
:key="item.keyCode"
|
||||
:label="item.keyCode"
|
||||
:name="item.keyCode"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="报文类别" prop="messageTypeCode">
|
||||
<el-select v-model="form.messageType" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆报文类型编码" prop="label">
|
||||
<el-select v-model="form.label" clearable placeholder="请选择车辆报文类型编码">
|
||||
<el-option
|
||||
v-for="item in messageTypeList"
|
||||
:key="item.messageCode"
|
||||
:label="item.messageName"
|
||||
:value="item.messageCode">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始位下标" prop="startBit">
|
||||
<el-input v-model="form.startBit" placeholder="请输入开始位下标" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结束位下标" prop="stopBit">
|
||||
<el-input v-model="form.stopBit" placeholder="请输入结束位下标" />
|
||||
</el-form-item>
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
</el-form>
|
||||
|
||||
<el-tabs @tab-click="handleTypeTabClick" >
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:name="item.value"
|
||||
>
|
||||
|
||||
<el-table v-loading="loading" :data="messageList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="车辆报文类型编码" align="center" prop="label" />
|
||||
<el-table-column label="开始位下标" align="center" prop="startBit" />
|
||||
<el-table-column label="结束位下标" align="center" prop="stopBit" />
|
||||
<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-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-dialog title="添加模板" :visible.sync="dialogFormVisible">
|
||||
<el-form :model="modelCodes">
|
||||
<el-form-item label="模板">
|
||||
<el-input v-model="modelCodes" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="addTab">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {listMessage, getMessage, delMessage, addMessage, updateMessage} from "/src/api/car/ListManager.js";
|
||||
import {listMessageType} from "@/api/car/ListManager";
|
||||
|
||||
export default {
|
||||
name: "Message",
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
value: 'identification',
|
||||
label: '车辆基础'
|
||||
},
|
||||
{
|
||||
value: 'information',
|
||||
label: '车辆数据'
|
||||
},
|
||||
{
|
||||
value: 'status',
|
||||
label: '设备状态'
|
||||
}
|
||||
],
|
||||
dialogFormVisible: false,
|
||||
tabPosition: 'left',
|
||||
editableTabsValue: '',
|
||||
editableTabs: [],
|
||||
tabIndex: '',
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 车辆报文记录表格数据
|
||||
messageList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
keyCode: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {},
|
||||
messageTypeList: [],
|
||||
queryTypeParams: {
|
||||
messageName: null,
|
||||
type: null
|
||||
},
|
||||
modelCodes: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getTypeList();
|
||||
this.getListCopy();
|
||||
},
|
||||
methods: {
|
||||
addTab() {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs.push({
|
||||
keyCode: this.modelCodes,
|
||||
content: 'New Tab content'
|
||||
});
|
||||
this.editableTabsValue = newTabName;
|
||||
this.dialogFormVisible = false
|
||||
},
|
||||
handleTabClick(tab) {
|
||||
this.queryParams.keyCode = tab.name
|
||||
this.form.keyCode = tab.name
|
||||
this.getList()
|
||||
},
|
||||
handleTypeTabClick(tab) {
|
||||
console.log(tab.name)
|
||||
this.queryParams.messageType = tab.name
|
||||
this.getList()
|
||||
},
|
||||
/** 查询车辆报文类型列表 */
|
||||
getTypeList() {
|
||||
this.loading = true;
|
||||
listMessageType(this.queryTypeParams).then(response => {
|
||||
this.messageTypeList = response.data;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getListCopy() {
|
||||
this.loading = true;
|
||||
listMessage(this.queryParams).then(response => {
|
||||
console.log('Response data:', response.data);
|
||||
|
||||
const rows = response.data;
|
||||
|
||||
if (Array.isArray(rows)) {
|
||||
this.messageList = rows;
|
||||
|
||||
const uniqueSysLeixingpick = new Map();
|
||||
rows.forEach(item => {
|
||||
uniqueSysLeixingpick.set(item.keyCode, item);
|
||||
});
|
||||
|
||||
// 将 Map 的值转换回数组
|
||||
this.editableTabs = Array.from(uniqueSysLeixingpick.values());
|
||||
} else {
|
||||
console.error('Rows is not an array:', rows);
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
}).catch(error => {
|
||||
console.error('Error fetching message details:', error);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 查询车辆报文记录列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listMessage(this.queryParams).then(response => {
|
||||
this.messageList = response.data;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
keyCode: null,
|
||||
label: null,
|
||||
startBit: null,
|
||||
stopBit: 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
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
addMessage(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 delMessage(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('message/message/export', {
|
||||
...this.queryParams
|
||||
}, `message_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,304 @@
|
|||
<template>
|
||||
<div class="table-container">
|
||||
<!-- 查询表单 -->
|
||||
<div class="query-form">
|
||||
<el-input
|
||||
v-model="queryParams.carVin"
|
||||
placeholder="输入 VIN 码进行查询"
|
||||
style="width: 200px; margin-right: 10px;"
|
||||
/>
|
||||
<el-button type="primary" @click="filterData">查询</el-button>
|
||||
<el-button type="primary" @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="addItem">添加</el-button>
|
||||
<div class="table-container">
|
||||
<el-table :data="listDate" border stripe style="width: 100%;" :show-header="true">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column label="VIN码" prop="carVin" align="center"/>
|
||||
<el-table-column label="车辆编号" prop="carPlate" align="center" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="车辆品牌" prop="carBrand" align="center" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="车辆型号" prop="carModel" align="center" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="车辆车型(如客车,卡车,公交车等)" prop="carType" align="center" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="车辆电机厂商" prop="carMotorManufacturer" align="center" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="电机型号" prop="carMotorModel" align="center" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="车辆电池厂商" prop="carBatteryManufacturer" align="center" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="电池型号" prop="carBatteryModel" align="center" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="围栏组编码" prop="groupCode" align="center" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="在线状态" prop="state" align="center" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_car_status" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="150" align="center" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-takeaway-box"
|
||||
@click="listItem(scope.row)"
|
||||
>查看
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-takeaway-box"
|
||||
@click="toVehicleData(scope.row)"
|
||||
>实时数据
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
@click="editItem(scope.row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
@click="delItem(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
|
||||
<!-- 添加或修改参数配置对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="vin码" prop="carVin">
|
||||
<el-input v-model="form.carVin" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆编号" prop="carPlate">
|
||||
<el-input v-model="form.carPlate" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆型号" prop="carModel">
|
||||
<el-input v-model="form.carModel" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆品牌" prop="carBrand">
|
||||
<el-input v-model="form.carBrand" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆电机厂商" prop="carMotorManufacturer">
|
||||
<el-input v-model="form.carMotorManufacturer" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电池型号" prop="carBatteryModel">
|
||||
<el-input v-model="form.carBatteryModel" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电机型号" prop="carMotorModel">
|
||||
<el-input v-model="form.carMotorModel" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电子围栏" prop="groupCode">
|
||||
<el-input v-model="form.groupCode" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆状态" prop="state">
|
||||
<el-radio-group v-model="form.state">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.sys_car_status"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入内容" type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {listManager , getManagerId , addManager,updateManager,delManager} from "@/api/car/ListManager";
|
||||
|
||||
|
||||
export default {
|
||||
dicts: ['sys_car_status'],
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
total: 0,
|
||||
open: false,
|
||||
form: {},
|
||||
title: "",
|
||||
listDate: [],
|
||||
rules: {
|
||||
carVin: [
|
||||
{required: true, message: "vin不能为空", trigger: "blur"}
|
||||
],
|
||||
},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
plateNumber: undefined,
|
||||
carVin: undefined,
|
||||
state: undefined,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toVehicleData(row){
|
||||
const carVin = row.carVin;
|
||||
alert(carVin);
|
||||
this.$router.push({
|
||||
path: `/vehicleManagement/trajectory`,
|
||||
query: { carVin }
|
||||
});
|
||||
},
|
||||
listItem(row) {
|
||||
const carVin = row.carVin;
|
||||
alert(carVin);
|
||||
this.$router.push({
|
||||
path: `/vehicleManagement/test`,
|
||||
query: { carVin }
|
||||
});
|
||||
},
|
||||
delItem(row){
|
||||
const id = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除').then(function() {
|
||||
return delManager(id);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != undefined) {
|
||||
updateManager(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addManager(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
cancel(){
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
editItem(row){
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getManagerId(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
});
|
||||
},
|
||||
addItem(){
|
||||
this.reset();
|
||||
this.open = true;
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
plateNumber: '',
|
||||
vin: '',
|
||||
onlineStatus: undefined,
|
||||
};
|
||||
this.getList();
|
||||
},
|
||||
filterData() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
listManager(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
||||
this.listDate = response.data.rows;
|
||||
this.total = response.data.total;
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
beforeCreate() {
|
||||
}, //生命周期 - 创建之前",
|
||||
beforeUpdate() {
|
||||
}, //生命周期 - 更新之前",
|
||||
updated() {
|
||||
}, //生命周期 - 更新之后",
|
||||
beforeDestroy() {
|
||||
}, //生命周期 - 销毁之前",
|
||||
destroyed() {
|
||||
}, //生命周期 - 销毁完成",
|
||||
activated() {
|
||||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-button--primary {
|
||||
border-radius: 10px; /* 修改边框半径 */
|
||||
background-color: #409eff; /* 修改背景色 */
|
||||
border-color: #409eff; /* 修改边框颜色 */
|
||||
&:hover {
|
||||
background-color: #66b1ff; /* 修改悬停时的背景色 */
|
||||
border-color: #66b1ff; /* 修改悬停时的边框颜色 */
|
||||
}
|
||||
}
|
||||
|
||||
.el-button--danger {
|
||||
border-radius: 10px; /* 修改边框半径 */
|
||||
background-color: #f56c6c; /* 修改背景色 */
|
||||
border-color: #f56c6c; /* 修改边框颜色 */
|
||||
&:hover {
|
||||
background-color: #f78989; /* 修改悬停时的背景色 */
|
||||
border-color: #f78989; /* 修改悬停时的边框颜色 */
|
||||
}
|
||||
}
|
||||
.table-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.query-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table-container .el-table__body-wrapper tbody tr:hover {
|
||||
background-color: #d8b7ff; /* 紫色背景 */
|
||||
}
|
||||
.table-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="title">实时轨迹</div>
|
||||
<div id="map" style="width: 100%; height: 500px;"></div>
|
||||
<br>
|
||||
<br>
|
||||
<el-descriptions direction="vertical" :column="4" :model="data" border>
|
||||
<el-descriptions-item label="vin码">{{ data.carVin }}</el-descriptions-item>
|
||||
<el-descriptions-item label="时间戳">{{ data.startTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经度">{{ data.longitude }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纬度">{{ data.latitude }}</el-descriptions-item>
|
||||
<el-descriptions-item label="车速">{{ data.speed }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总里程">{{ data.totalMileage }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总电压">{{ data.totalVoltage }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总电流">{{ data.combinedCurrent }}</el-descriptions-item>
|
||||
<el-descriptions-item label="绝缘电阻">{{ data.insulationResistance }}</el-descriptions-item>
|
||||
<el-descriptions-item label="档位">{{ data.gearPosition }}</el-descriptions-item>
|
||||
<el-descriptions-item label="加速踏板行程值">{{ data.acceleratorPedalTravelValue }}</el-descriptions-item>
|
||||
<el-descriptions-item label="制动踏板行程值">{{ data.brakePedalTravelValue }}</el-descriptions-item>
|
||||
<el-descriptions-item label="燃料消耗率">{{ data.specificFuelConsumption }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电机控制器温度">{{ data.motorControllerTemperature }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电机转速">{{ data.motorSpeed }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电机转矩">{{ data.motorTorque }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电机温度">{{ data.motorTemperature }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电机电压">{{ data.motorVoltage }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电机电流">{{ data.motorCurrent }}</el-descriptions-item>
|
||||
<el-descriptions-item label="动力电池剩余电量SOC">{{ data.powerBatteryRemainingSOC }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="当前状态允许的最大反馈功率">{{ data.maximumPower }}</el-descriptions-item>
|
||||
<el-descriptions-item label="当前状态允许最大放电功率">{{ data.maximumDischargePower }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="BMS自检计数器">{{ data.bmsselfCheckCounter }}</el-descriptions-item>
|
||||
<el-descriptions-item label="动力电池充放电电流">{{ data.electricCurrent }}</el-descriptions-item>
|
||||
<el-descriptions-item label="动力电池负载端总电压V3">{{ data.totalVoltageV3 }}</el-descriptions-item>
|
||||
<el-descriptions-item label="单次最大电压">{{ data.singleMaximumVoltage }}</el-descriptions-item>
|
||||
<el-descriptions-item label="单体电池最低电压">{{ data.minimumVoltageOfABattery }}</el-descriptions-item>
|
||||
<el-descriptions-item label="单体电池最高温度">{{ data.maximumBatteryTemperature }}</el-descriptions-item>
|
||||
<el-descriptions-item label="单体电池最低温度">{{ data.minimumBatteryTemperature }}</el-descriptions-item>
|
||||
<el-descriptions-item label="动力电池可用容量">{{ data.powerBatteryAvailableCapacity }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="车辆状态">{{ data.vehicleStatus }}</el-descriptions-item>
|
||||
<el-descriptions-item label="充电状态">{{ data.chargingState }}</el-descriptions-item>
|
||||
<el-descriptions-item label="运行状态">{{ data.runningState }}</el-descriptions-item>
|
||||
<el-descriptions-item label="SOC">{{ data.soc }}</el-descriptions-item>
|
||||
<el-descriptions-item label="可充电储能装置工作状态">{{ data.workStatus }}</el-descriptions-item>
|
||||
<el-descriptions-item label="驱动电机状态">{{ data.driveMotorCondition }}</el-descriptions-item>
|
||||
<el-descriptions-item label="定位是否有效">{{ data.orientation }}</el-descriptions-item>
|
||||
<el-descriptions-item label="EAS">{{ data.eas }}</el-descriptions-item>
|
||||
<el-descriptions-item label="PTC">{{ data.ptc }}</el-descriptions-item>
|
||||
<el-descriptions-item label="EPS">{{ data.eps }}</el-descriptions-item>
|
||||
<el-descriptions-item label="ABS">{{ data.abs }}</el-descriptions-item>
|
||||
<el-descriptions-item label="MCU">{{ data.mcu }}</el-descriptions-item>
|
||||
<el-descriptions-item label="动力电池加热状态">{{ data.heatingState }}</el-descriptions-item>
|
||||
<el-descriptions-item label="动力电池当前状态">{{ data.currentStatus }}</el-descriptions-item>
|
||||
<el-descriptions-item label="动力电池保温状态">{{ data.insulationState }}</el-descriptions-item>
|
||||
<el-descriptions-item label="DCDC">{{ data.dcdc }}</el-descriptions-item>
|
||||
<el-descriptions-item label="CHG">{{ data.chg }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { getDataByRedis } from "@/api/car/ListManager";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
polyline: null,
|
||||
carMarker: null,
|
||||
carVin: this.$route.query.carVin || null ,
|
||||
intervalId: null,
|
||||
data: {}, // 数据存储变量
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 创建定时器，每隔一定时间间隔调用fetchData方法
|
||||
this.intervalId = setInterval(this.fetchData, 1000); // 10000毫秒（10秒）
|
||||
},
|
||||
methods: {
|
||||
async fetchData() {
|
||||
try {
|
||||
const res = await getDataByRedis(this.carVin);
|
||||
this.data = res.data;
|
||||
|
||||
// 更新车辆位置
|
||||
this.updateCarMarker();
|
||||
} catch (error) {
|
||||
console.error("Error fetching vehicle data:", error);
|
||||
}
|
||||
},
|
||||
initMap() {
|
||||
this.map = new AMap.Map('map', {
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点
|
||||
zoom: 20, // 地图缩放级别
|
||||
});
|
||||
this.polyline = new AMap.Polyline({
|
||||
map: this.map,
|
||||
path: [], // 初始为空
|
||||
strokeColor: '#3366FF',
|
||||
strokeWeight: 5,
|
||||
});
|
||||
|
||||
// 初始化车辆模型标记
|
||||
this.carMarker = new AMap.Marker({
|
||||
map: this.map,
|
||||
position: [116.397428, 39.90923], // 初始位置
|
||||
icon: 'https://webapi.amap.com/images/car.png',
|
||||
offset: new AMap.Pixel(-26, -13),
|
||||
autoRotation: true,
|
||||
});
|
||||
},
|
||||
updateCarMarker() {
|
||||
if (this.data.longitude && this.data.latitude) {
|
||||
const newPoint = [this.data.longitude, this.data.latitude];
|
||||
|
||||
// 更新车辆模型位置
|
||||
this.carMarker.setPosition(newPoint);
|
||||
|
||||
// 更新路径线条坐标
|
||||
const path = this.polyline.getPath();
|
||||
path.push(new AMap.LngLat(this.data.longitude, this.data.latitude));
|
||||
this.polyline.setPath(path);
|
||||
|
||||
// 调整地图视野
|
||||
this.map.setCenter(newPoint);
|
||||
}
|
||||
},
|
||||
},
|
||||
// methods: {
|
||||
// fetchData() {
|
||||
// getDataByRedis(this.carVin).then(res=>{
|
||||
// this.data = res.data
|
||||
// })
|
||||
// },
|
||||
// initMap() {
|
||||
// this.map = new AMap.Map('map', {
|
||||
// center: [116.397428, 39.90923], // 初始化地图中心点
|
||||
// zoom: 13, // 地图缩放级别
|
||||
// });
|
||||
//
|
||||
// // 初始化轨迹线
|
||||
// this.polyline = new AMap.Polyline({
|
||||
// map: this.map,
|
||||
// path: [], // 初始路径为空
|
||||
// strokeColor: "#FF0000", // 轨迹线的颜色
|
||||
// strokeWeight: 5, // 轨迹线的宽度
|
||||
// });
|
||||
//
|
||||
// // 模拟实时数据更新
|
||||
// setInterval(this.updateTrajectory, 1100);
|
||||
// },
|
||||
// updateTrajectory() {
|
||||
// // 替换为实际的经纬度数据获取逻辑
|
||||
// const newPoint = [this.data.longitude, this.data.latitude];
|
||||
// // 更新轨迹线
|
||||
// const path = this.polyline.getPath();
|
||||
// path.push(newPoint);
|
||||
// this.polyline.setPath(path);
|
||||
// // 调整地图视野
|
||||
// this.map.setCenter(newPoint);
|
||||
// },
|
||||
// },
|
||||
mounted() {
|
||||
this.initMap();
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清除定时器
|
||||
if (this.intervalId) {
|
||||
clearInterval(this.intervalId);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue