车辆报文管理界面

新增车辆报文管理界面，支持故障管理、指标预警和电子围栏。此界面允许用户操作车辆报文类型编码、开始位下标、结束位下标，并提供添加模板、删除和查看详细信息的功能。通过选项卡界面管理不同的配置和信息。

src/views/a/b/index.vue

@@ -0,0 +1,282 @@
+<template>
+  <div>
+    <el-button
+      v-for="(tab, index) in tabs"
+      :key="index"
+      :type="activeTab === tab ? 'primary' : 'default'"
+      @click="activeTab = tab"
+    >
+      {{ tab }}
+    </el-button>
+
+    <div v-if="activeTab === '车辆报文'">
+      <h2>车辆报文</h2>
+        <el-row>
+          <el-button size="small" @click=" dialogFormVisible =  true">
+            添加模板
+          </el-button>
+        </el-row>
+      <el-row>
+        <el-tabs v-model="editableTabsValue" :tab-position="tabPosition" type="card" @tab-click="handleTabClick">
+            <el-tab-pane
+             v-for="(item,index) in editableTabsValue"
+             :key="item.keyCode"
+             :label="item.keyCode"
+             :name="item.keyCode"
+            >
+              <el-card>
+              <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                 <el-form-item label="报文类别" prop="messageTypeCode">
+                    <el-select v-model="form.messageType" clearable placeholder="请选择">
+                       <el-option
+                         v-for="item in options"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value"
+                       ></el-option>
+                    </el-select>
+                 </el-form-item>
+                <el-form-item label="车文类型编码" prop="label">
+                   <el-select v-model="form.label" clearable placeholder="请选择车辆报文类型编码">
+                     <el-option
+                       v-for="item in messageTypeList"
+                       :key="item.messageCode"
+                       :label="item.messageName"
+                       :value="item.messageCode"
+                     >
+                     </el-option>
+                   </el-select>
+                </el-form-item>
+                <el-form-item label="开始位下标" prop="startBit">
+                  <el-input v-model="form.startBit" placeholder="请输入开始位下标"></el-input>
+                </el-form-item>
+                <el-form-item label="结束位下标" prop="stopBit">
+                  <el-input v-model="form.stopBit" placeholder="请输入结束位下标"></el-input>
+                </el-form-item>
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+              </el-form>
+
+                <el-tabs @tab-click="handleTypeTabClick" >
+                  <el-tab-pane
+                    v-for="(item, index) in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :name="item.value"
+                  >
+                  </el-tab-pane>
+                </el-tabs>
+
+                <el-table v-loading="loading" :data="messageList" @selection-change="handleSelectionChange">
+                  <el-table-column type="selection" width="55" align="center" />
+                  <el-table-column label="车辆报文类型编码" align="center" prop="label" />
+                  <el-table-column label="开始位下标" align="center" prop="startBit" />
+                  <el-table-column label="结束位下标" align="center" prop="stopBit" />
+                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                      <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-delete"
+                        @click="handleDelete(scope.row)"
+                      >删除</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+
+                <el-dialog title="添加模板" :visible.sync="dialogFormVisible">
+                  <el-form :model="modelCodes">
+                    <el-form-item label="模板">
+                      <el-input v-model="modelCodes" autocomplete="off"></el-input>
+                    </el-form-item>
+                  </el-form>
+                  <div slot="footer" class="dialog-footer">
+                    <el-button @click="dialogFormVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="addTab">确 定</el-button>
+                  </div>
+                </el-dialog>
+              </el-card>
+            </el-tab-pane>
+        </el-tabs>
+      </el-row>
+    </div>
+    <div v-else-if="activeTab === '故障管理'">
+      <h2>故障管理</h2>
+
+    </div>
+    <div v-else-if="activeTab === '指标预警'">
+      <h2>指标预警</h2>
+
+    </div>
+    <div v-else-if="activeTab === '电子围栏'">
+      <h2>电子围栏</h2>
+
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { listMessage ,getMessage, delMessage, addMessage, updateMessage } from "/src/api/car/ListManager.js";
+import {listMessageType} from "@/api/car/ListManager";
+
+export default {
+  data() {
+    return {
+      rules: {},
+      showSearch: true,
+      ids: [],
+      messageList: [],
+      title: "",
+      loading: true,
+      messageTypeList: [],
+      total: 0,
+      queryTypeParams: {
+        messageName: null,
+        type: null
+      },
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        keyCode: null,
+      },
+      modelCodes: '',
+      options: [
+        {
+          value: 'identification',
+          label: '车辆基础'
+        },
+        {
+          value: 'information',
+          label: '车辆数据'
+        },
+        {
+          value: 'status',
+          label: '设备状态'
+        }
+      ],
+      tabPosition: 'left',
+      editableTabsValue: false,
+      form: {},
+      dialogFormVisible : false,
+      tabs: ['车辆报文', '故障管理', '指标预警', '电子围栏'],
+      activeTab: '车辆报文',
+    };
+  },
+  created() {
+    this.getList();
+    this.getTypeList();
+    this.getListCopy();
+  },
+  methods:{
+    getListCopy() {
+      this.loading = true;
+      listMessage(this.queryParams).then(response => {
+        console.log('Response data:', response.data);
+        const rows = response.data;
+        if (Array.isArray(rows)) {
+          this.messageList = rows;
+          const uniqueSysLeixingpick = new Map();
+          rows.forEach(item => {
+            uniqueSysLeixingpick.set(item.keyCode, item);
+          });
+          // 将 Map 的值转换回数组
+          this.editableTabs = Array.from(uniqueSysLeixingpick.values());
+        } else {
+          console.error('Rows is not an array:', rows);
+        }
+        this.loading = false;
+      }).catch(error => {
+        console.error('Error fetching message details:', error);
+        this.loading = false;
+      });
+    },
+    getList() {
+      this.loading = true;
+      listMessage(this.queryParams).then(response => {
+        this.messageList = response.data;
+        this.loading = false;
+      });
+    },
+    addTab() {
+      let newTabName = ++this.tabIndex + '';
+      this.editableTabs.push({
+        keyCode: this.modelCodes,
+        content: 'New Tab content'
+      });
+      this.editableTabsValue = newTabName;
+      this.dialogFormVisible = false
+    },
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        keyCode: null,
+        label: null,
+        startBit: null,
+        stopBit: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    getTypeList() {
+      this.loading = true;
+      listMessageType(this.queryTypeParams).then(response => {
+        this.messageTypeList = response.data;
+        this.loading = false;
+      });
+    },
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    handleTypeTabClick(tab) {
+      console.log(tab.name)
+      this.queryParams.messageType = tab.name
+      this.getList()
+    },
+    submitForm() {
+      addMessage(this.form).then(response => {
+        this.$modal.msgSuccess("新增成功");
+        this.open = false;
+        this.getList();
+      });
+    },
+    handleTabClick(tab) {
+      this.queryParams.keyCode = tab.name
+      this.form.keyCode = tab.name
+      this.getList()
+    },
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除车辆报文记录编号为"' + ids + '"的数据项？').then(function () {
+        return delMessage(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+
+  },
+};
+</script>
+
+<style scoped>
+.el-button {
+  margin-right: 10px;
+}
+</style>