fix(): 报文模板

src/views/message/template/index.vue

@@ -1,41 +1,76 @@
 <template>
   <div class="app-container">
-    <el-row gutter="20">
+    <el-row :gutter="20">
 
-      <el-col span="5">
+      <el-col :span="5">
         <el-row>
           <el-button>添加模板</el-button>
         </el-row>
         <el-row class="grid-content" :style="{'height': contentHeight +'px'}">
-          <el-card v-for="i in 10" class="box-card">
+          <el-card v-for="message in messageList" class="box-card">
             <div slot="header" class="clearfix">
-              <span>卡片名称</span>
+              <span>{{ message.messageName }}</span>
-              <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+              <el-button style="float: right; padding: 3px 0" type="text" @click="selectMessage(message)">模板配置</el-button>
             </div>
-            无描述信息
+            {{ message.description }}
           </el-card>
         </el-row>
       </el-col>
-      <el-col span="19">
+      <el-col :span="19">
-        <el-empty description="请选择报文模板" image-size="300"></el-empty>
+        <el-empty v-if="selectedMessage === null" description="请选择报文模板" :image-size="300"></el-empty>
-        <el-tabs v-model="activeName">
+        <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-select>
+          </el-form-item>
+
+          <el-form-item label="编码" >
+            <el-input v-model="messageValue.code" placeholder="编码"></el-input>
+          </el-form-item>
+
+          <el-form-item label="标签">
+            <el-input v-model="messageValue.label" placeholder="标签"></el-input>
+          </el-form-item>
+
+          <el-form-item label="起始位">
+            <el-input v-model="messageValue.startLocation" 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="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>
+
+          <el-form-item v-if="messageValue.valueType === 'interval'" label="最小值">
+            <el-input v-model="messageValue.minValue" placeholder="最小值"></el-input>
+          </el-form-item>
+
+          <el-form-item v-if="messageValue.valueType === 'interval'" label="最大值">
+            <el-input v-model="messageValue.maxValue" placeholder="最大值"></el-input>
+          </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-col>
+          </el-row>
+        </el-form>
+        <el-tabs v-if="selectedMessage !== null" v-model="activeName">
           <el-tab-pane label="基础" name="基础">
             车辆基础报文部分，为车辆第一个基础部分报文
             <el-divider><i class="el-icon-shopping-cart-2"></i></el-divider>
-            <el-form :inline="true" :model="formInline" class="demo-form-inline">
-              <el-form-item label="审批人">
-                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
-              </el-form-item>
-              <el-form-item label="活动区域">
-                <el-select v-model="formInline.region" placeholder="活动区域">
-                  <el-option label="区域一" value="shanghai"></el-option>
-                  <el-option label="区域二" value="beijing"></el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="onSubmit">查询</el-button>
-              </el-form-item>
-            </el-form>
           </el-tab-pane>
           <el-tab-pane label="数据" name="数据">
             车辆数据报文部分，为车辆第二个基础部分报文
@@ -58,16 +93,40 @@ export default {
     return {
       contentHeight: 1024,
       activeName: "基础",
-      formInline: {
+      messageList: [
-        user: '',
+        {messageName: "报文1", description: "暂时没有描述"},
-        region: ''
+        {messageName: "报文2", description: "暂时没有描述"},
+      ],
+      selectedMessage: null,
+      messageValue: {
+        category: null,
+        code: null,
+        label: null,
+        startLocation: null,
+        endLocation: null,
+        valueType: null,
+        fixedValue: null,
+        minValue: null,
+        maxValue: null,
       }
     }
   },
   created() {
     this.contentHeight = window.innerHeight - 140
   },
-  methods: {}
+  methods: {
+    /**
+     * 选中报文
+     * @param message
+     */
+    selectMessage(message) {
+      this.selectedMessage = message
+      this.activeName = "基础"
+    },
+    addMessageValue() {
+      console.log("报文值");
+    }
+  }
 }
 </script>
 

src/views/vehicle/index.vue

@@ -264,6 +264,7 @@ import { positionList } from '@/api/vehicle/position'
 import { create, gen, remove } from '@/api/vehicle/vehicle'
 
 export default {
+  name: 'Vehicle',
   data() {
     return {
       contentHeight: 1024,