From 586c454ebe5db2482751c34a4f32321e057b8189 Mon Sep 17 00:00:00 2001
From: DongZeLiang <2746733890@qq.com>
Date: Thu, 12 Dec 2024 11:00:26 +0800
Subject: [PATCH] =?UTF-8?q?feat():=20=E6=8A=A5=E6=96=87=E6=A8=A1=E6=9D=BF?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8F=82=E8=80=83=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/message/template/index.vue | 156 ++++++++++++++++-----------
 1 file changed, 94 insertions(+), 62 deletions(-)

diff --git a/src/views/message/template/index.vue b/src/views/message/template/index.vue
index 19e2339..7eca711 100644
--- a/src/views/message/template/index.vue
+++ b/src/views/message/template/index.vue
@@ -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>
@@ -133,7 +165,7 @@
               </el-table-column>
               <el-table-column prop="fixedValue" label="固定值">
                 <template slot-scope="scope">
-                  {{ scope.row.valueType === 'fixed' ? scope.row.fixedValue : '-'  }}
+                  {{ scope.row.valueType === 'fixed' ? scope.row.fixedValue : '-' }}
                 </template>
               </el-table-column>
               <el-table-column prop="fixedValue" label="范围值">
@@ -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>
@@ -164,7 +196,7 @@
               </el-table-column>
               <el-table-column prop="fixedValue" label="固定值">
                 <template slot-scope="scope">
-                  {{ scope.row.valueType === 'fixed' ? scope.row.fixedValue : '-'  }}
+                  {{ scope.row.valueType === 'fixed' ? scope.row.fixedValue : '-' }}
                 </template>
               </el-table-column>
               <el-table-column prop="fixedValue" label="范围值">
@@ -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,28 +302,28 @@ export default {
      */
     selectMessage(message) {
       this.selectedMessage = message
-      this.activeName = "基础"
+      this.activeName = '基础'
       this.selectMessageTemplateValueList()
     },
-    doMessageTemplateValueSave(){
+    doMessageTemplateValueSave() {
       messageTemplateValueSave(this.selectedMessage.id, this.messageValue).then(response => {
         this.$notify({
           title: '成功',
           message: '报文模板，添加成功',
           type: 'success'
         })
-        this.selectMessageTemplateValueList();
+        this.selectMessageTemplateValueList()
       })
     },
-    selectMessageTemplateValueList(){
+    selectMessageTemplateValueList() {
       messageTemplateValueList(this.selectedMessage.id).then(response => {
-        this.messageTemplateValueList = response.data;
+        this.messageTemplateValueList = response.data
       })
     },
     // 保存报文模板
-    doMessageTemplateSave(){
+    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;
 }