fix(): 报文模板

src/router/index.js

@@ -66,6 +66,18 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/message/template',
+    component: Layout,
+    children: [
+      {
+        path: 'MessageTemplate',
+        name: '报文模板',
+        component: () => import('@/views/message/template'),
+        meta: { title: '报文模板', icon: 'table' }
+      }
+    ]
+  },
   {
     path: '/vehicle',
     component: Layout,

src/views/login/index.vue

@@ -38,7 +38,8 @@
         />
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:48%;margin-bottom:30px;"
+      <el-button
+        :loading="loading" type="primary" style="width:48%;margin-bottom:30px;"
                  @click.native.prevent="handleLogin">登录系统
       </el-button>
       <el-button :loading="loading" type="primary" style="width:48%;margin-bottom:30px; margin-left: 4%"

src/views/message/template/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="app-container">
+    <el-row gutter="20">
+
+      <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">
+            <div slot="header" class="clearfix">
+              <span>卡片名称</span>
+              <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+            </div>
+            无描述信息
+          </el-card>
+        </el-row>
+      </el-col>
+      <el-col span="19">
+        <el-empty description="请选择报文模板" image-size="300"></el-empty>
+        <el-tabs 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="数据">
+            车辆数据报文部分，为车辆第二个基础部分报文
+            <el-divider><i class="el-icon-data-analysis"></i></el-divider>
+          </el-tab-pane>
+          <el-tab-pane label="设备状态" name="设备状态">
+            车辆设备状态报文信息，为车辆第三个基础部分报文
+            <el-divider><i class="el-icon-view"></i></el-divider>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MessageTemplate',
+  data() {
+    return {
+      contentHeight: 1024,
+      activeName: "基础",
+      formInline: {
+        user: '',
+        region: ''
+      }
+    }
+  },
+  created() {
+    this.contentHeight = window.innerHeight - 140
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.box-card {
+  margin-top: 20px;
+}
+
+.grid-content {
+  margin-top: 10px;
+  border-radius: 4px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.grid-content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.grid-content::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.grid-content::-webkit-scrollbar-track {
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
+</style>