fix(): 报文模板

master
DongZeLiang 2024-09-20 15:54:43 +08:00
parent ec0d987612
commit 58eda45f29
2 changed files with 259 additions and 18 deletions

View File

@ -0,0 +1,52 @@
import request from '@/utils/request'
/**
* 电子围栏模板列表
* @returns {*}
*/
export function messageTemplateList() {
return request({
url: '/message/template/list',
method: 'get'
})
}
/**
* 电子围栏模板保存
* @param data 围栏添加对象
* @returns {*}
*/
export function messageTemplateSave(data) {
return request({
url: '/message/template',
method: 'post',
data: data
})
}
/**
* 根据报文ID获取报文模板值对象
* @param messageId 报文ID
* @returns {*}
*/
export function messageTemplateValueList(messageId) {
return request({
url: `/message/template/${messageId}/value`,
method: 'get'
})
}
/**
* 根据报文模板ID保存报文对象
* @param messageId 报文模板ID
* @param data 模板值对象
* @returns {*}
*/
export function messageTemplateValueSave(messageId, data) {
return request({
url: `/message/template/${messageId}/value`,
method: 'post',
data: data
})
}

View File

@ -4,13 +4,31 @@
<el-col :span="5">
<el-row>
<el-button>添加模板</el-button>
<el-button @click="toMessageTemplateSave"></el-button>
</el-row>
<el-dialog
title="提示"
:visible.sync="messageTemplateSaveStatus"
width="30%">
<el-form ref="form" :model="messageTemplateForm" label-width="80px">
<el-form-item label="模板名称">
<el-input v-model="messageTemplateForm.messageName"></el-input>
</el-form-item>
<el-form-item label="模板描述">
<el-input type="textarea" v-model="messageTemplateForm.description"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="messageTemplateSaveStatus = false"> </el-button>
<el-button type="primary" @click="doMessageTemplateSave"> </el-button>
</span>
</el-dialog>
<el-row class="grid-content" :style="{'height': contentHeight +'px'}">
<el-card v-for="message in messageList" class="box-card">
<el-card v-for="message in messageTemplateList" class="box-card">
<div slot="header" class="clearfix">
<span>{{ message.messageName }}</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="selectMessage(message)"></el-button>
<el-button style="float: right; padding: 3px 0" type="text" @click="selectMessage(message)">
</el-button>
</div>
{{ message.description }}
</el-card>
@ -18,7 +36,8 @@
</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-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>
@ -39,19 +58,42 @@
<el-input v-model="messageValue.startLocation" placeholder="起始位"></el-input>
</el-form-item>
<el-form-item label="数据长度">
<el-input v-model="messageValue.length" placeholder="数据长度"></el-input>
</el-form-item>
<el-form-item label="终止位">
<el-input v-model="messageValue.endLocation" placeholder="终止位"></el-input>
</el-form-item>
<el-form-item label="数据类型">
<el-select v-model="messageValue.valueType" placeholder="数据类型" style="width: 198px">
<el-option label="固定值" value="random" key="random"></el-option>
<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-select>
</el-form-item>
<el-form-item v-if="messageValue.valueType === 'random'" label="固定值">
<el-input v-model="messageValue.fixedValue" placeholder="固定值"></el-input>
<el-form-item v-if="messageValue.valueType === 'fixed'" label="固定值">
<el-select
v-model="messageValue.fixedValueList"
style="width: 198px"
multiple
filterable
allow-create
default-first-option
placeholder="请输入固定值">
<el-option
v-for="item in []"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-if="messageValue.valueType === 'el'" label="表达式">
<el-input v-model="messageValue.elValue" placeholder="表达式"></el-input>
</el-form-item>
<el-form-item v-if="messageValue.valueType === 'interval'" label="最小值">
@ -63,22 +105,105 @@
</el-form-item>
<el-row :gutter="40">
<el-col>
<el-button style="float: right; margin-right: 50%" size="mini" type="primary" @click="addMessageValue"></el-button>
<el-button style="float: right; margin-right: 50%" size="mini" type="primary" @click="doMessageTemplateValueSave">
添加
</el-button>
</el-col>
</el-row>
</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>
<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="valueType" label="数据类型">
<template slot-scope="scope">
<el-tag :type="scope.row.valueType === 'fixed' ? 'success' : '' " effect="Dark" size="small">{{ scope.row.valueType === 'fixed' ? '固定值' : '区间随机值' }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="fixedValue" label="表达式">
<template slot-scope="scope">
{{ scope.row.valueType === 'el' ? scope.row.elValue : '-' }}
</template>
</el-table-column>
<el-table-column prop="fixedValue" label="固定值">
<template slot-scope="scope">
{{ scope.row.valueType === 'fixed' ? scope.row.fixedValue : '-' }}
</template>
</el-table-column>
<el-table-column prop="fixedValue" label="范围值">
<template slot-scope="scope">
{{ scope.row.valueType === 'interval' ? scope.row.minValue + '至' +scope.row.maxValue : '-' }}
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="数据" name="数据">
车辆数据报文部分为车辆第二个基础部分报文
车辆数据报文部分为车辆第二个基础部分报文每个部分的报文都是从1开始
<el-divider><i class="el-icon-data-analysis"></i></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="valueType" label="数据类型">
<template slot-scope="scope">
<el-tag :type="scope.row.valueType === 'fixed' ? 'success' : '' " effect="Dark" size="small">{{ scope.row.valueType === 'fixed' ? '固定值' : '区间随机值' }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="fixedValue" label="表达式">
<template slot-scope="scope">
{{ scope.row.valueType === 'el' ? scope.row.elValue : '-' }}
</template>
</el-table-column>
<el-table-column prop="fixedValue" label="固定值">
<template slot-scope="scope">
{{ scope.row.valueType === 'fixed' ? scope.row.fixedValue : '-' }}
</template>
</el-table-column>
<el-table-column prop="fixedValue" label="范围值">
<template slot-scope="scope">
{{ scope.row.valueType === 'interval' ? scope.row.minValue + '至' +scope.row.maxValue : '-' }}
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="设备状态" name="设备状态">
车辆设备状态报文信息为车辆第三个基础部分报文
车辆设备状态报文信息为车辆第三个基础部分报文每个部分的报文都是从1开始
<el-divider><i class="el-icon-view"></i></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="valueType" label="数据类型">
<template slot-scope="scope">
<el-tag :type="scope.row.valueType === 'fixed' ? 'success' : '' " effect="Dark" size="small">{{ scope.row.valueType === 'fixed' ? '固定值' : '区间随机值' }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="fixedValue" label="表达式">
<template slot-scope="scope">
{{ scope.row.valueType === 'el' ? scope.row.elValue : '-' }}
</template>
</el-table-column>
<el-table-column prop="fixedValue" label="固定值">
<template slot-scope="scope">
{{ scope.row.valueType === 'fixed' ? scope.row.fixedValue : '-' }}
</template>
</el-table-column>
<el-table-column prop="fixedValue" label="范围值">
<template slot-scope="scope">
{{ scope.row.valueType === 'interval' ? scope.row.minValue + '至' +scope.row.maxValue : '-' }}
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-col>
@ -87,32 +212,56 @@
</template>
<script>
import {
messageTemplateList,
messageTemplateSave,
messageTemplateValueList,
messageTemplateValueSave
} from "@/api/message/template";
export default {
name: 'MessageTemplate',
data() {
return {
contentHeight: 1024,
activeName: "基础",
messageList: [
{messageName: "报文1", description: "暂时没有描述"},
{messageName: "报文2", description: "暂时没有描述"},
],
messageTemplateList: [],
selectedMessage: null,
//
messageTemplateSaveStatus: false,
//
messageTemplateForm: {
messageName: "",
description: "",
},
messageTemplateValueList: [],
messageValue: {
category: null,
code: null,
label: null,
length: null,
startLocation: null,
endLocation: null,
valueType: null,
elValue: null,
fixedValue: null,
fixedValueList: [],
minValue: null,
maxValue: null,
}
}
},
watch: {
'messageValue.fixedValueList': {
handler(val) {
this.messageValue.fixedValue = this.messageValue.fixedValueList.toString()
},
immediate: true
}
},
created() {
this.contentHeight = window.innerHeight - 140
this.selectMessageTemplateList();
},
methods: {
/**
@ -122,9 +271,46 @@ export default {
selectMessage(message) {
this.selectedMessage = message
this.activeName = "基础"
this.selectMessageTemplateValueList()
},
addMessageValue() {
console.log("报文值");
doMessageTemplateValueSave(){
messageTemplateValueSave(this.selectedMessage.id, this.messageValue).then(response => {
this.$notify({
title: '成功',
message: '报文模板,添加成功',
type: 'success'
})
this.selectMessageTemplateValueList();
})
},
selectMessageTemplateValueList(){
messageTemplateValueList(this.selectedMessage.id).then(response => {
this.messageTemplateValueList = response.data;
})
},
//
doMessageTemplateSave(){
messageTemplateSave(this.messageTemplateForm).then(response => {
this.messageTemplateSaveStatus = false;
this.$notify({
title: '成功',
message: '报文模板,添加成功',
type: 'success'
})
this.selectMessageTemplateList()
})
},
toMessageTemplateSave() {
this.messageTemplateSaveStatus = true;
this.messageTemplateForm = {
messageName: "",
description: "",
}
},
selectMessageTemplateList() {
messageTemplateList().then(response => {
this.messageTemplateList = response.data;
})
}
}
}
@ -155,4 +341,7 @@ export default {
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
.el-dialog {
background-color: #ffffff;
}
</style>