vehicle
/
VehicleSimulationAdmin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(): 报文模板增加参考项

master
DongZeLiang 2024-12-12 11:00:26 +08:00
parent 6dd4e87011
commit 586c454ebe
1 changed files with 94 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
src/views/message/template/index.vue
View File

@ -9,13 +9,14 @@
<el-dialog <el-dialog
title="提示" title="提示"
:visible.sync="messageTemplateSaveStatus" :visible.sync="messageTemplateSaveStatus"
width="30%"> width="30%"
>
<el-form ref="form" :model="messageTemplateForm" label-width="80px"> <el-form ref="form" :model="messageTemplateForm" label-width="80px">
<el-form-item label="模板名称"> <el-form-item label="模板名称">
<el-input v-model="messageTemplateForm.messageName"></el-input> <el-input v-model="messageTemplateForm.messageName" />
</el-form-item> </el-form-item>
<el-form-item label="模板描述"> <el-form-item label="模板描述">
<el-input type="textarea" v-model="messageTemplateForm.description"></el-input> <el-input v-model="messageTemplateForm.description" type="textarea" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
@ -35,42 +36,48 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="19"> <el-col :span="19">
<el-empty v-if="selectedMessage === null" description="请选择报文模板" :image-size="300"></el-empty> <el-empty v-if="selectedMessage === null" description="请选择报文模板" :image-size="300" />
<el-form v-if="selectedMessage !== null" :inline="true" :model="messageValue" size="mini" <el-form
class="demo-form-inline" label-width="80px"> v-if="selectedMessage !== null"
:inline="true"
:model="messageValue"
size="mini"
class="demo-form-inline"
label-width="80px"
>
<el-form-item label="报文类别"> <el-form-item label="报文类别">
<el-select v-model="messageValue.category" placeholder="报文类别" style="width: 198px"> <el-select v-model="messageValue.category" placeholder="报文类别" style="width: 198px">
<el-option label="车辆基础" value="base" key="base"></el-option> <el-option key="base" label="车辆基础" value="base" />
<el-option label="车辆数据" value="data" key="data"></el-option> <el-option key="data" label="车辆数据" value="data" />
<el-option label="设备状态" value="status" key="status"></el-option> <el-option key="status" label="设备状态" value="status" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="编码"> <el-form-item label="编码">
<el-input v-model="messageValue.code" placeholder="编码"></el-input> <el-input v-model="messageValue.code" placeholder="编码" />
</el-form-item> </el-form-item>
<el-form-item label="标签"> <el-form-item label="标签">
<el-input v-model="messageValue.label" placeholder="标签"></el-input> <el-input v-model="messageValue.label" placeholder="标签" />
</el-form-item> </el-form-item>
<el-form-item label="起始位"> <el-form-item label="起始位">
<el-input v-model="messageValue.startLocation" placeholder="起始位"></el-input> <el-input v-model="messageValue.startLocation" placeholder="起始位" />
</el-form-item> </el-form-item>
<el-form-item label="数据长度"> <el-form-item label="数据长度">
<el-input v-model="messageValue.length" placeholder="数据长度"></el-input> <el-input v-model="messageValue.length" placeholder="数据长度" />
</el-form-item> </el-form-item>
<el-form-item label="终止位"> <el-form-item label="终止位">
<el-input v-model="messageValue.endLocation" placeholder="终止位"></el-input> <el-input v-model="messageValue.endLocation" placeholder="终止位" />
</el-form-item> </el-form-item>
<el-form-item label="数据类型"> <el-form-item label="数据类型">
<el-select v-model="messageValue.valueType" placeholder="数据类型" style="width: 198px"> <el-select v-model="messageValue.valueType" placeholder="数据类型" style="width: 198px">
<el-option label="表达式" value="el" key="el"></el-option> <el-option key="el" label="表达式" value="el" />
<el-option label="固定值" value="fixed" key="fixed"></el-option> <el-option key="fixed" label="固定值" value="fixed" />
<el-option label="区间随机值" value="interval" key="interval"></el-option> <el-option key="interval" label="区间随机值" value="interval" />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -82,26 +89,27 @@
filterable filterable
allow-create allow-create
default-first-option default-first-option
placeholder="请输入固定值"> placeholder="请输入固定值"
>
<el-option <el-option
v-for="item in []" v-for="item in []"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
</el-option> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="messageValue.valueType === 'el'" label="表达式"> <el-form-item v-if="messageValue.valueType === 'el'" label="表达式">
<el-input v-model="messageValue.elValue" placeholder="表达式"></el-input> <el-input v-model="messageValue.elValue" placeholder="表达式" />
</el-form-item> </el-form-item>
<el-form-item v-if="messageValue.valueType === 'interval'" label="最小值"> <el-form-item v-if="messageValue.valueType === 'interval'" label="最小值">
<el-input v-model="messageValue.minValue" placeholder="最小值"></el-input> <el-input v-model="messageValue.minValue" placeholder="最小值" />
</el-form-item> </el-form-item>
<el-form-item v-if="messageValue.valueType === 'interval'" label="最大值"> <el-form-item v-if="messageValue.valueType === 'interval'" label="最大值">
<el-input v-model="messageValue.maxValue" placeholder="最大值"></el-input> <el-input v-model="messageValue.maxValue" placeholder="最大值" />
</el-form-item> </el-form-item>
<el-row :gutter="40"> <el-row :gutter="40">
<el-col> <el-col>
@ -113,14 +121,38 @@
</el-form> </el-form>
<el-tabs v-if="selectedMessage !== null" v-model="activeName"> <el-tabs v-if="selectedMessage !== null" v-model="activeName">
<el-tab-pane label="基础" name="基础"> <el-tab-pane label="基础" name="基础">
车辆基础报文部分，为车辆第一个基础部分报文，每个部分的报文都是从1开始 车辆基础报文部分，为车辆第一个基础部分报文，每个部分的报文都是从1开始,以下是支持支持的EL表达式内容
<el-divider><i class="el-icon-shopping-cart-2"></i></el-divider> <el-collapse>
<el-collapse-item title="点击展开示例内容" name="1">
<el-table
:data="[
{label:'VIN', elValue: 'this.vin', length: '17'},
{label:'报文采集时间', elValue: 'this.timeMillis', length: '12'},
{label:'当前速度', elValue: 'this.speed', length: '17'},
{label:'当前总里程', elValue: 'this.mileage', length: '17'},
{label:'档位', elValue: 'this.gear', length: '17'},
{label:'燃油消耗率', elValue: 'this.fuelConsumptionRate', length: '17'},
]"
style="width: 100%"
>
<el-table-column prop="label" label="数据项" />
<el-table-column prop="elValue" label="EL表达式内容" />
<el-table-column prop="length" label="数据长度" />
<el-table-column label="操作" >
<template slot-scope="scope">
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
<el-divider><i class="el-icon-shopping-cart-2" /></el-divider>
<el-table :data="messageTemplateValueList.filter(messageTemplateValue => messageTemplateValue.category === 'base')" style="width: 100%"> <el-table :data="messageTemplateValueList.filter(messageTemplateValue => messageTemplateValue.category === 'base')" style="width: 100%">
<el-table-column prop="code" label="编码"></el-table-column> <el-table-column prop="code" label="编码" />
<el-table-column prop="label" label="标签"></el-table-column> <el-table-column prop="label" label="标签" />
<el-table-column prop="length" label="数据长度"></el-table-column> <el-table-column prop="length" label="数据长度" />
<el-table-column prop="startLocation" label="起始位"></el-table-column> <el-table-column prop="startLocation" label="起始位" />
<el-table-column prop="endLocation" label="终止位"></el-table-column> <el-table-column prop="endLocation" label="终止位" />
<el-table-column prop="valueType" label="数据类型"> <el-table-column prop="valueType" label="数据类型">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="scope.row.valueType === 'fixed' ? 'success' : '' " effect="Dark" size="small">{{ scope.row.valueType === 'fixed' ? '固定值' : '区间随机值' }}</el-tag> <el-tag :type="scope.row.valueType === 'fixed' ? 'success' : '' " effect="Dark" size="small">{{ scope.row.valueType === 'fixed' ? '固定值' : '区间随机值' }}</el-tag>
@ -133,7 +165,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="fixedValue" label="固定值"> <el-table-column prop="fixedValue" label="固定值">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.valueType === 'fixed' ? scope.row.fixedValue : '-' }} {{ scope.row.valueType === 'fixed' ? scope.row.fixedValue : '-' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="fixedValue" label="范围值"> <el-table-column prop="fixedValue" label="范围值">
@ -145,13 +177,13 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="数据" name="数据"> <el-tab-pane label="数据" name="数据">
车辆数据报文部分，为车辆第二个基础部分报文，每个部分的报文都是从1开始 车辆数据报文部分，为车辆第二个基础部分报文，每个部分的报文都是从1开始
<el-divider><i class="el-icon-data-analysis"></i></el-divider> <el-divider><i class="el-icon-data-analysis" /></el-divider>
<el-table :data="messageTemplateValueList.filter(messageTemplateValue => messageTemplateValue.category === 'data')" style="width: 100%"> <el-table :data="messageTemplateValueList.filter(messageTemplateValue => messageTemplateValue.category === 'data')" style="width: 100%">
<el-table-column prop="code" label="编码"></el-table-column> <el-table-column prop="code" label="编码" />
<el-table-column prop="label" label="标签"></el-table-column> <el-table-column prop="label" label="标签" />
<el-table-column prop="length" label="数据长度"></el-table-column> <el-table-column prop="length" label="数据长度" />
<el-table-column prop="startLocation" label="起始位"></el-table-column> <el-table-column prop="startLocation" label="起始位" />
<el-table-column prop="endLocation" label="终止位"></el-table-column> <el-table-column prop="endLocation" label="终止位" />
<el-table-column prop="valueType" label="数据类型"> <el-table-column prop="valueType" label="数据类型">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="scope.row.valueType === 'fixed' ? 'success' : '' " effect="Dark" size="small">{{ scope.row.valueType === 'fixed' ? '固定值' : '区间随机值' }}</el-tag> <el-tag :type="scope.row.valueType === 'fixed' ? 'success' : '' " effect="Dark" size="small">{{ scope.row.valueType === 'fixed' ? '固定值' : '区间随机值' }}</el-tag>
@ -164,7 +196,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="fixedValue" label="固定值"> <el-table-column prop="fixedValue" label="固定值">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.valueType === 'fixed' ? scope.row.fixedValue : '-' }} {{ scope.row.valueType === 'fixed' ? scope.row.fixedValue : '-' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="fixedValue" label="范围值"> <el-table-column prop="fixedValue" label="范围值">
@ -176,13 +208,13 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="设备状态" name="设备状态"> <el-tab-pane label="设备状态" name="设备状态">
车辆设备状态报文信息，为车辆第三个基础部分报文，每个部分的报文都是从1开始 车辆设备状态报文信息，为车辆第三个基础部分报文，每个部分的报文都是从1开始
<el-divider><i class="el-icon-view"></i></el-divider> <el-divider><i class="el-icon-view" /></el-divider>
<el-table :data="messageTemplateValueList.filter(messageTemplateValue => messageTemplateValue.category === 'status')" style="width: 100%"> <el-table :data="messageTemplateValueList.filter(messageTemplateValue => messageTemplateValue.category === 'status')" style="width: 100%">
<el-table-column prop="code" label="编码"></el-table-column> <el-table-column prop="code" label="编码" />
<el-table-column prop="label" label="标签"></el-table-column> <el-table-column prop="label" label="标签" />
<el-table-column prop="length" label="数据长度"></el-table-column> <el-table-column prop="length" label="数据长度" />
<el-table-column prop="startLocation" label="起始位"></el-table-column> <el-table-column prop="startLocation" label="起始位" />
<el-table-column prop="endLocation" label="终止位"></el-table-column> <el-table-column prop="endLocation" label="终止位" />
<el-table-column prop="valueType" label="数据类型"> <el-table-column prop="valueType" label="数据类型">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="scope.row.valueType === 'fixed' ? 'success' : '' " effect="Dark" size="small">{{ scope.row.valueType === 'fixed' ? '固定值' : '区间随机值' }}</el-tag> <el-tag :type="scope.row.valueType === 'fixed' ? 'success' : '' " effect="Dark" size="small">{{ scope.row.valueType === 'fixed' ? '固定值' : '区间随机值' }}</el-tag>
@ -217,22 +249,22 @@ import {
messageTemplateSave, messageTemplateSave,
messageTemplateValueList, messageTemplateValueList,
messageTemplateValueSave messageTemplateValueSave
} from "@/api/message/template"; } from '@/api/message/template'
export default { export default {
name: 'MessageTemplate', name: 'MessageTemplate',
data() { data() {
return { return {
contentHeight: 1024, contentHeight: 1024,
activeName: "基础", activeName: '基础',
messageTemplateList: [], messageTemplateList: [],
selectedMessage: null, selectedMessage: null,
// 报文模板模态框 // 报文模板模态框
messageTemplateSaveStatus: false, messageTemplateSaveStatus: false,
// 模板表单 // 模板表单
messageTemplateForm: { messageTemplateForm: {
messageName: "", messageName: '',
description: "", description: ''
}, },
messageTemplateValueList: [], messageTemplateValueList: [],
messageValue: { messageValue: {
@ -247,7 +279,7 @@ export default {
fixedValue: null, fixedValue: null,
fixedValueList: [], fixedValueList: [],
minValue: null, minValue: null,
maxValue: null, maxValue: null
} }
} }
}, },
@ -261,7 +293,7 @@ export default {
}, },
created() { created() {
this.contentHeight = window.innerHeight - 140 this.contentHeight = window.innerHeight - 140
this.selectMessageTemplateList(); this.selectMessageTemplateList()
}, },
methods: { methods: {
/** /**
@ -270,28 +302,28 @@ export default {
*/ */
selectMessage(message) { selectMessage(message) {
this.selectedMessage = message this.selectedMessage = message
this.activeName = "基础" this.activeName = '基础'
this.selectMessageTemplateValueList() this.selectMessageTemplateValueList()
}, },
doMessageTemplateValueSave(){ doMessageTemplateValueSave() {
messageTemplateValueSave(this.selectedMessage.id, this.messageValue).then(response => { messageTemplateValueSave(this.selectedMessage.id, this.messageValue).then(response => {
this.$notify({ this.$notify({
title: '成功', title: '成功',
message: '报文模板，添加成功', message: '报文模板，添加成功',
type: 'success' type: 'success'
}) })
this.selectMessageTemplateValueList(); this.selectMessageTemplateValueList()
}) })
}, },
selectMessageTemplateValueList(){ selectMessageTemplateValueList() {
messageTemplateValueList(this.selectedMessage.id).then(response => { messageTemplateValueList(this.selectedMessage.id).then(response => {
this.messageTemplateValueList = response.data; this.messageTemplateValueList = response.data
}) })
}, },
// 保存报文模板 // 保存报文模板
doMessageTemplateSave(){ doMessageTemplateSave() {
messageTemplateSave(this.messageTemplateForm).then(response => { messageTemplateSave(this.messageTemplateForm).then(response => {
this.messageTemplateSaveStatus = false; this.messageTemplateSaveStatus = false
this.$notify({ this.$notify({
title: '成功', title: '成功',
message: '报文模板，添加成功', message: '报文模板，添加成功',
@ -301,22 +333,22 @@ export default {
}) })
}, },
toMessageTemplateSave() { toMessageTemplateSave() {
this.messageTemplateSaveStatus = true; this.messageTemplateSaveStatus = true
this.messageTemplateForm = { this.messageTemplateForm = {
messageName: "", messageName: '',
description: "", description: ''
} }
}, },
selectMessageTemplateList() { selectMessageTemplateList() {
messageTemplateList().then(response => { messageTemplateList().then(response => {
this.messageTemplateList = response.data; this.messageTemplateList = response.data
}) })
} }
} }
} }
</script> </script>
<style scoped> <style>
.box-card { .box-card {
margin-top: 20px; margin-top: 20px;
} }