feat(): 报文模板增加参考项
DongZeLiang
parent
6dd4e87011
commit
586c454ebe
|
|
@ -9,13 +9,14 @@
|
|||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="messageTemplateSaveStatus"
|
||||
width="30%">
|
||||
width="30%"
|
||||
>
|
||||
<el-form ref="form" :model="messageTemplateForm" label-width="80px">
|
||||
<el-form-item label="模板名称">
|
||||
<el-input v-model="messageTemplateForm.messageName"></el-input>
|
||||
<el-input v-model="messageTemplateForm.messageName" />
|
||||
</el-form-item>
|
||||
<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>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
|
|
@ -35,42 +36,48 @@
|
|||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<el-empty v-if="selectedMessage === null" description="请选择报文模板" :image-size="300"></el-empty>
|
||||
<el-form v-if="selectedMessage !== null" :inline="true" :model="messageValue" size="mini"
|
||||
class="demo-form-inline" label-width="80px">
|
||||
<el-empty v-if="selectedMessage === null" description="请选择报文模板" :image-size="300" />
|
||||
<el-form
|
||||
v-if="selectedMessage !== null"
|
||||
:inline="true"
|
||||
:model="messageValue"
|
||||
size="mini"
|
||||
class="demo-form-inline"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="报文类别">
|
||||
<el-select v-model="messageValue.category" placeholder="报文类别" style="width: 198px">
|
||||
<el-option label="车辆基础" value="base" key="base"></el-option>
|
||||
<el-option label="车辆数据" value="data" key="data"></el-option>
|
||||
<el-option label="设备状态" value="status" key="status"></el-option>
|
||||
<el-option key="base" label="车辆基础" value="base" />
|
||||
<el-option key="data" label="车辆数据" value="data" />
|
||||
<el-option key="status" label="设备状态" value="status" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<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 label="标签">
|
||||
<el-input v-model="messageValue.label" placeholder="标签"></el-input>
|
||||
<el-input v-model="messageValue.label" placeholder="标签" />
|
||||
</el-form-item>
|
||||
|
||||
<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 label="数据长度">
|
||||
<el-input v-model="messageValue.length" placeholder="数据长度"></el-input>
|
||||
<el-input v-model="messageValue.length" placeholder="数据长度" />
|
||||
</el-form-item>
|
||||
|
||||
<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 label="数据类型">
|
||||
<el-select v-model="messageValue.valueType" placeholder="数据类型" style="width: 198px">
|
||||
<el-option label="表达式" value="el" key="el"></el-option>
|
||||
<el-option label="固定值" value="fixed" key="fixed"></el-option>
|
||||
<el-option label="区间随机值" value="interval" key="interval"></el-option>
|
||||
<el-option key="el" label="表达式" value="el" />
|
||||
<el-option key="fixed" label="固定值" value="fixed" />
|
||||
<el-option key="interval" label="区间随机值" value="interval" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
|
@ -82,26 +89,27 @@
|
|||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
placeholder="请输入固定值">
|
||||
placeholder="请输入固定值"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in []"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<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 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 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-row :gutter="40">
|
||||
<el-col>
|
||||
|
|
@ -113,14 +121,38 @@
|
|||
</el-form>
|
||||
<el-tabs v-if="selectedMessage !== null" v-model="activeName">
|
||||
<el-tab-pane label="基础" name="基础">
|
||||
车辆基础报文部分，为车辆第一个基础部分报文，每个部分的报文都是从1开始
|
||||
<el-divider><i class="el-icon-shopping-cart-2"></i></el-divider>
|
||||
车辆基础报文部分，为车辆第一个基础部分报文，每个部分的报文都是从1开始,以下是支持支持的EL表达式内容
|
||||
<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-column prop="code" label="编码"></el-table-column>
|
||||
<el-table-column prop="label" label="标签"></el-table-column>
|
||||
<el-table-column prop="length" label="数据长度"></el-table-column>
|
||||
<el-table-column prop="startLocation" label="起始位"></el-table-column>
|
||||
<el-table-column prop="endLocation" label="终止位"></el-table-column>
|
||||
<el-table-column prop="code" label="编码" />
|
||||
<el-table-column prop="label" label="标签" />
|
||||
<el-table-column prop="length" label="数据长度" />
|
||||
<el-table-column prop="startLocation" label="起始位" />
|
||||
<el-table-column prop="endLocation" label="终止位" />
|
||||
<el-table-column prop="valueType" label="数据类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.valueType === 'fixed' ? 'success' : '' " effect="Dark" size="small">{{ scope.row.valueType === 'fixed' ? '固定值' : '区间随机值' }}</el-tag>
|
||||
|
|
@ -145,13 +177,13 @@
|
|||
</el-tab-pane>
|
||||
<el-tab-pane label="数据" name="数据">
|
||||
车辆数据报文部分，为车辆第二个基础部分报文，每个部分的报文都是从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-column prop="code" label="编码"></el-table-column>
|
||||
<el-table-column prop="label" label="标签"></el-table-column>
|
||||
<el-table-column prop="length" label="数据长度"></el-table-column>
|
||||
<el-table-column prop="startLocation" label="起始位"></el-table-column>
|
||||
<el-table-column prop="endLocation" label="终止位"></el-table-column>
|
||||
<el-table-column prop="code" label="编码" />
|
||||
<el-table-column prop="label" label="标签" />
|
||||
<el-table-column prop="length" label="数据长度" />
|
||||
<el-table-column prop="startLocation" label="起始位" />
|
||||
<el-table-column prop="endLocation" label="终止位" />
|
||||
<el-table-column prop="valueType" label="数据类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.valueType === 'fixed' ? 'success' : '' " effect="Dark" size="small">{{ scope.row.valueType === 'fixed' ? '固定值' : '区间随机值' }}</el-tag>
|
||||
|
|
@ -176,13 +208,13 @@
|
|||
</el-tab-pane>
|
||||
<el-tab-pane label="设备状态" name="设备状态">
|
||||
车辆设备状态报文信息，为车辆第三个基础部分报文，每个部分的报文都是从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-column prop="code" label="编码"></el-table-column>
|
||||
<el-table-column prop="label" label="标签"></el-table-column>
|
||||
<el-table-column prop="length" label="数据长度"></el-table-column>
|
||||
<el-table-column prop="startLocation" label="起始位"></el-table-column>
|
||||
<el-table-column prop="endLocation" label="终止位"></el-table-column>
|
||||
<el-table-column prop="code" label="编码" />
|
||||
<el-table-column prop="label" label="标签" />
|
||||
<el-table-column prop="length" label="数据长度" />
|
||||
<el-table-column prop="startLocation" label="起始位" />
|
||||
<el-table-column prop="endLocation" label="终止位" />
|
||||
<el-table-column prop="valueType" label="数据类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.valueType === 'fixed' ? 'success' : '' " effect="Dark" size="small">{{ scope.row.valueType === 'fixed' ? '固定值' : '区间随机值' }}</el-tag>
|
||||
|
|
@ -217,22 +249,22 @@ import {
|
|||
messageTemplateSave,
|
||||
messageTemplateValueList,
|
||||
messageTemplateValueSave
|
||||
} from "@/api/message/template";
|
||||
} from '@/api/message/template'
|
||||
|
||||
export default {
|
||||
name: 'MessageTemplate',
|
||||
data() {
|
||||
return {
|
||||
contentHeight: 1024,
|
||||
activeName: "基础",
|
||||
activeName: '基础',
|
||||
messageTemplateList: [],
|
||||
selectedMessage: null,
|
||||
// 报文模板模态框
|
||||
messageTemplateSaveStatus: false,
|
||||
// 模板表单
|
||||
messageTemplateForm: {
|
||||
messageName: "",
|
||||
description: "",
|
||||
messageName: '',
|
||||
description: ''
|
||||
},
|
||||
messageTemplateValueList: [],
|
||||
messageValue: {
|
||||
|
|
@ -247,7 +279,7 @@ export default {
|
|||
fixedValue: null,
|
||||
fixedValueList: [],
|
||||
minValue: null,
|
||||
maxValue: null,
|
||||
maxValue: null
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -261,7 +293,7 @@ export default {
|
|||
},
|
||||
created() {
|
||||
this.contentHeight = window.innerHeight - 140
|
||||
this.selectMessageTemplateList();
|
||||
this.selectMessageTemplateList()
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
|
|
@ -270,7 +302,7 @@ export default {
|
|||
*/
|
||||
selectMessage(message) {
|
||||
this.selectedMessage = message
|
||||
this.activeName = "基础"
|
||||
this.activeName = '基础'
|
||||
this.selectMessageTemplateValueList()
|
||||
},
|
||||
doMessageTemplateValueSave() {
|
||||
|
|
@ -280,18 +312,18 @@ export default {
|
|||
message: '报文模板，添加成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.selectMessageTemplateValueList();
|
||||
this.selectMessageTemplateValueList()
|
||||
})
|
||||
},
|
||||
selectMessageTemplateValueList() {
|
||||
messageTemplateValueList(this.selectedMessage.id).then(response => {
|
||||
this.messageTemplateValueList = response.data;
|
||||
this.messageTemplateValueList = response.data
|
||||
})
|
||||
},
|
||||
// 保存报文模板
|
||||
doMessageTemplateSave() {
|
||||
messageTemplateSave(this.messageTemplateForm).then(response => {
|
||||
this.messageTemplateSaveStatus = false;
|
||||
this.messageTemplateSaveStatus = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '报文模板，添加成功',
|
||||
|
|
@ -301,22 +333,22 @@ export default {
|
|||
})
|
||||
},
|
||||
toMessageTemplateSave() {
|
||||
this.messageTemplateSaveStatus = true;
|
||||
this.messageTemplateSaveStatus = true
|
||||
this.messageTemplateForm = {
|
||||
messageName: "",
|
||||
description: "",
|
||||
messageName: '',
|
||||
description: ''
|
||||
}
|
||||
},
|
||||
selectMessageTemplateList() {
|
||||
messageTemplateList().then(response => {
|
||||
this.messageTemplateList = response.data;
|
||||
this.messageTemplateList = response.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style>
|
||||
.box-card {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue