fix(): 报文模板

src/api/message/template/index.js

@@ -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
+  })
+}
+

src/views/message/template/index.vue

@@ -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-form-item v-if="messageValue.valueType === 'fixed'" label="固定值">
-            <el-input v-model="messageValue.fixedValue" placeholder="固定值"></el-input>
+            <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: [
+      messageTemplateList: [],
-        {messageName: "报文1", description: "暂时没有描述"},
-        {messageName: "报文2", description: "暂时没有描述"},
-      ],
       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() {
+    doMessageTemplateValueSave(){
-      console.log("报文值");
+      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>