diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 4c07761..4cc4a31 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -31,6 +31,10 @@
         <svg-icon icon-class="dashboard" />
         <span>在线监测</span>
       </div>
+      <div class="right-menu-item hover-effect" @click="setShowModel('mkmj')">
+        <svg-icon icon-class="dashboard" />
+        <span>口门门禁管理</span>
+      </div>
       <div class="right-menu-item hover-effect" @click="setShowModel('system')">
         <svg-icon icon-class="example" />
         <span>系统管理</span>
diff --git a/src/views/corpInfo/corpinfouser/components/detail.vue b/src/views/corpInfo/corpinfouser/components/detail.vue
index 2b6e345..da1ca4b 100644
--- a/src/views/corpInfo/corpinfouser/components/detail.vue
+++ b/src/views/corpInfo/corpinfouser/components/detail.vue
@@ -96,6 +96,9 @@
               <el-form-item label="备注">
                 <el-input :rows="3" v-model="form.BZ" type="textarea" placeholder="这里输入备注..."/>
               </el-form-item>
+              <el-form-item label="车辆信息">
+                <span>{{ form.vehicleMessage }}</span>
+              </el-form-item>
               <el-form-item label="是否在线学习人员">
                 <el-switch v-model="form.ISSTUDENT" active-color="#13ce66" inactive-color="#ff4949"/>
               </el-form-item>
@@ -746,7 +749,8 @@ export default {
         letTypeOfWorkType: 'select',
         USER_ID_CARD: '',
         PERSONNEL_TYPE: '',
-        userCerList: []
+        userCerList: [],
+        vehicleMessage: '' // 车辆信息
       },
       uesrInfoDic: {
         minzuList: [], // 民族 0a0e406f27f74ee698fe9979d25f62dd
@@ -1129,6 +1133,7 @@ export default {
       ).then((data) => {
         this.form = { ...this.form, ...data.pd, ...data.licenseinfor }
         // this.form = Object.assign(this.form, data.pd, data.licenseinfor) // copy obj
+        this.form.vehicleMessage = data.pd.VEHICLE_NOS
         this.form.userCerList = data.userCerList
         if (this.form.ROLE_ID != null && this.form.ROLE_ID != '') {
           // 将字符串转换成数组，此时是字符串数组
diff --git a/src/views/longtermvehicle/vehiclemessage/components/indexList.vue b/src/views/longtermvehicle/vehiclemessage/components/indexList.vue
new file mode 100644
index 0000000..bf0c926
--- /dev/null
+++ b/src/views/longtermvehicle/vehiclemessage/components/indexList.vue
@@ -0,0 +1,320 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="90px">
+      <el-row>
+        <el-col :span="4">
+          <el-form-item label="分公司名称">
+            <el-input v-model="searchForm.CORP_NAME" placeholder="分公司名称"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label-width="10px">
+            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
+              搜索
+            </el-button>
+            <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
+              重置
+            </el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table
+      v-loading="listLoading"
+      ref="multipleTable"
+      :data="varList"
+      :row-key="getRowKey"
+      :header-cell-style="{
+        'font-weight': 'bold',
+        'color': '#000'
+      }"
+      tooltip-effect="dark"
+      border
+      fit
+      highlight-current-row
+    >
+      <!--      <el-table-column :reserve-selection="true" type="selection" width="55" align="center"/>-->
+      <el-table-column type="index" label="序号" width="50" align="center" />
+      <el-table-column prop="CORP_NAME" label="分公司名称" />
+      <el-table-column label="属地" >
+        <template slot-scope="{row}">
+          <span v-if="row.prvinceName">{{ row.prvinceName }}</span>
+          <span v-if="row.cityName"> -- {{ row.cityName }}</span>
+          <span v-if="row.countryName"> --{{ row.countryName }}</span>
+          <span v-if="row.villageName"> -- {{ row.villageName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="INDUSTRYALL" label="所属行业">
+        <!--        <template slot-scope="{row}">-->
+        <!--          {{ translate(industryList,row.INDUSTRY) }}-->
+        <!--        </template>-->
+      </el-table-column>
+      <el-table-column prop="count" label="人数"/>
+      <el-table-column prop="CORP_STATE" label="分公司状态">
+        <template slot-scope="{row}">
+          {{ translate(qyztList,row.CORP_STATE) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="left" width="110">
+        <template slot-scope="{row}">
+          <el-button type="success" icon="el-icon-view" size="mini" @click="handleEdit(row.CORPINFO_ID)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="page-btn-group">
+      <div>
+        <!--
+           <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
+-->
+      </div>
+      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+    </div>
+
+    <el-dialog :visible.sync="dialogFormEdit" title="查看公司组织架构" width="600px">
+      <el-tree :data="treeData" :props="defaultProps"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import SelectTree from '@/components/SelectTree'
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+export default {
+  components: { Pagination, SelectTree },
+  directives: { waves },
+  data() {
+    return {
+      listLoading: true,
+      add: true,
+      del: true,
+      edit: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      searchForm: {
+        CORP_NAME: '',
+        PROVINCE: '',
+        CITY: '',
+        CORP_STATE: '',
+        CREATTIME: ''
+      },
+      total: 0,
+      varList: [],
+      qyztList: [],
+      options: [{
+        value: '0',
+        label: '启用'
+      }, {
+        value: '1',
+        label: '禁用'
+      }],
+      STATE: [],
+      industryList: [],
+      countryList: [],
+      villageList: [],
+      treeData: [],
+      CITY_CODE: '',
+      COUNTRY: '',
+      VILLAGE: '',
+      config: config,
+      dialogFormEdit: false,
+      rules: {
+        CORP_NAME: [{ required: true, message: '分公司名称不能为空', trigger: 'blur' }],
+        NEWCORP_NAME: [{ required: true, message: '新分公司名称不能为空', trigger: 'blur' }],
+        PASSWORD: [{ required: true, message: '分公司密码不能为空', trigger: 'blur' }]
+      },
+      updateBranchNameForm: {
+        CORPINFO_ID: '',
+        CORP_NAME: '',
+        NEWCORP_NAME: '',
+        PASSWORD: ''
+      },
+      defaultProps: {
+        children: 'nodes',
+        label: 'name'
+      }
+    }
+  },
+  created() {
+    this.getList()
+    this.getDicList('qyztList', '07c2674470c1498ba1ebd74906b3b518')
+    this.getDicList('industryList', 'f2598ba72e864eadabf0ca4b664d26b9')
+  },
+  methods: {
+    getRowKey(row) {
+      return row.CORPINFO_ID
+    },
+    // 搜索
+    getQuery() {
+      this.getList()
+    },
+    // 获取列表
+    getList() {
+      this.listLoading = true
+      requestFN(
+        '/corpinfo/listRetrieval?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        { ...this.searchForm }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.varList
+        this.total = data.page.totalResult
+        this.hasButton()
+        this.CITY_CODE = data.CITY_CODE
+        this.getCountryList()
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    getCountryList() {
+      requestFN(
+        '/dictionaries/getLevels',
+        {
+          DICTIONARIES_ID: this.CITY_CODE
+        }
+      ).then((data) => {
+        this.countryList = data.list
+      }).catch((e) => {
+      })
+    },
+    getVillageList(value, id) {
+      this.COUNTRY = value
+      requestFN(
+        '/dictionaries/getLevels',
+        {
+          DICTIONARIES_ID: id
+        }
+      ).then((data) => {
+        this.villageList = data.list
+      }).catch((e) => {
+      })
+    },
+    changeVillage(village) {
+      this.VILLAGE = village
+    },
+    // 查看
+    handleEdit(ID) {
+      this.$parent.activeName = 'IndexView'
+      this.$parent.CORPINFO_ID = ID
+    },
+    enableORDisable(ISUSE, CORPINFO_ID) {
+      this.$confirm(ISUSE === '0' ? '确定要启用该账户吗?' : '确定要禁用该账户吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/corpinfo/editisuse',
+          {
+            CORPINFO_ID,
+            ISUSE
+          }
+        ).then(() => {
+          this.$message({
+            message: ISUSE === '0' ? '启用成功' : '禁用成功',
+            type: 'success'
+          })
+          this.listLoading = false
+          this.varList = []
+          this.listQuery.page = 1
+          this.getList()
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {})
+    },
+    // 判断按钮权限，用于是否显示按钮
+    hasButton: function() {
+      var keys = 'corpinfo:add,corpinfo:del,corpinfo:edit,toExcel'
+      requestFN(
+        '/head/hasButton',
+        {
+          keys: keys
+        }
+      ).then((data) => {
+        this.add = data.corpinfofhadminadd		// 新增权限
+        this.del = data.corpinfofhadmindel		// 删除权限
+        this.edit = data.corpinfofhadminedit	// 修改权限
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    goKeyReset() {
+      this.searchForm = {
+        CORP_NAME: '',
+        PROVINCE: '',
+        CITY: '',
+        CORP_STATE: '',
+        CREATTIME: ''
+      }
+      this.getList()
+    },
+    resetPwd(id) {
+      this.$confirm('确定要重置选中的密码吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/corpinfo/resetPwd',
+          {
+            CORPINFO_ID: id
+          }
+        ).then(() => {
+          this.$message({
+            message: '重置成功',
+            type: 'success'
+          })
+          this.listLoading = false
+          this.varList = []
+          this.listQuery.page = 1
+          this.getList()
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    // 获取数据字典
+    getDicList(list, DICTIONARIES_ID) {
+      requestFN(
+        '/dictionaries/getLevels',
+        {
+          DICTIONARIES_ID
+        }
+      ).then((data) => {
+        this[list] = data.list
+      }).catch((e) => {
+      })
+    },
+    translate(list, id) {
+      for (let i = 0; i < list.length; i++) {
+        if (list[i].BIANMA === id || list[i].DICTIONARIES_ID === id) {
+          return list[i].NAME
+        }
+      }
+    },
+    showBranchName(CORPINFO_ID, CORP_NAME) {
+      this.$refs.form && this.$refs.form.resetFields()
+      this.dialogFormEdit = true
+      this.updateBranchNameForm.CORPINFO_ID = CORPINFO_ID
+      this.updateBranchNameForm.CORP_NAME = CORP_NAME
+    },
+    updateBranchName(ID) {
+      requestFN(
+        '/department/listTreeCorpInfo',
+        {
+          CORPINFO_ID: ID
+        }
+      ).then((data) => {
+        this.treeData = JSON.parse(data.zTreeNodes)
+      }).catch((e) => {
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/longtermvehicle/vehiclemessage/components/index_view.vue b/src/views/longtermvehicle/vehiclemessage/components/index_view.vue
new file mode 100644
index 0000000..3d92dd8
--- /dev/null
+++ b/src/views/longtermvehicle/vehiclemessage/components/index_view.vue
@@ -0,0 +1,981 @@
+<template>
+  <div class="icons-container">
+    <el-container>
+      <el-aside width="200px" style="background-color:#fff">
+        <div class="filter-btn-group">
+          <el-tree
+            v-loading="treeLoading"
+            ref="tree"
+            :data="treeData"
+            :props="defaultProps"
+            :filter-node-method="filterNode"
+            class="filter-tree"
+            @node-click="handleNodeClick"/>
+        </div>
+      </el-aside>
+      <el-main>
+        <el-form label-width="60px">
+          <el-row>
+            <el-col :span="2">
+              <el-form-item label-width="0px">
+                <el-button v-show="DEPARTMENT_ID != '0'" icon="el-icon-arrow-left" @click="goReturn()">返回</el-button>
+              </el-form-item>
+            </el-col>
+            <el-col :span="3">
+              <el-form-item label="车牌号">
+                <el-input v-model="searchForm.LICENCE_NO" placeholder="请输入车牌号..." />
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="m-l-10">
+              <el-form-item label="车辆类型" prop="VEHICLE_TYPE" label-width="100px">
+                <SelectTree
+                  ref="selectTree_Search1"
+                  :clearable="false"
+                  :options="vehicleTypeList"
+                  :props="vehicleDefaultProps"
+                  v-model="searchForm.VEHICLE_TYPE"
+                  placeholder="请选择车辆类型"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="m-l-10">
+              <el-form-item label="车辆所属部门" prop="VEHICLE_DEPARTMENT_ID" label-width="100px">
+                <SelectTree
+                  ref="selectTree_Search2"
+                  :clearable="false"
+                  :options="treeData"
+                  :props="defaultProps"
+                  v-model="searchForm.VEHICLE_DEPARTMENT_ID"
+                  placeholder="请选择车辆所属部门"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="m-l-10">
+              <el-form-item label="车辆责任人" label-width="100px">
+                <el-input v-model="searchForm.USER_NAME" placeholder="请输入车辆责任人..." />
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label-width="10px">
+                <el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
+                  搜索
+                </el-button>
+                <el-button v-waves type="success" icon="el-icon-refresh" @click="goKeyReset">
+                  重置
+                </el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table
+          v-loading="listLoading"
+          ref="vehicleMessageTable"
+          :data="varList"
+          :row-key="getRowKey"
+          :header-cell-style="{
+            'font-weight': 'bold',
+            'color': '#000'
+          }"
+          tooltip-effect="dark"
+          border
+          fit
+          highlight-current-row
+        >
+          <el-table-column
+            :reserve-selection="true"
+            type="selection"
+            width="55"
+            align="center"/>
+          <el-table-column type="index" label="序号" width="50" align="center" />
+          <el-table-column prop="CORPINFO_NAME" label="分公司名称" align="center" />
+          <el-table-column prop="LICENCE_NO" label="车牌号" align="center" />
+          <el-table-column label="车牌类型" align="center">
+            <template slot-scope="{row}">
+              {{ translateLicenceType(row.LICENCE_TYPE) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="车辆类型" align="center">
+            <template slot-scope="{row}">
+              {{ translateVehicleType(row.VEHICLE_TYPE) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="DEPARTMENT_NAME" label="车辆所属部门" align="center" />
+          <el-table-column prop="USER_NAME" label="车辆责任人" align="center"/>
+          <el-table-column label="操作" align="center" width="480">
+            <template slot-scope="{row}">
+              <el-button type="warning" icon="el-icon-more" size="mini" @click="vehicleInOutRecordBtn(row.LICENCE_NO)">车辆进出记录</el-button>
+              <el-button icon="el-icon-view" size="mini" @click="showDetail(row.VEHICLE_ID)">查看</el-button>
+              <el-button type="primary" icon="el-icon-edit" size="mini" @click="openEditDialogEditBtn(row.VEHICLE_ID)">修改</el-button>
+              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSingleDataDeleteBtn(row.VEHICLE_ID, row.USER_ID, row.EMPLOYEE_VEHICLE_USER_ID)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="page-btn-group">
+          <div>
+            <el-button type="primary" icon="el-icon-plus" @click="openAddDialogAddBtn">新增</el-button>
+          </div>
+          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getPageList" />
+        </div>
+        <!--  添加车辆信息  -->
+        <el-dialog :visible.sync="addDialogVisible" title="添加车辆信息" width="600px">
+          <el-form v-if="addDialogVisible" ref="addForm" :model="addForm" label-width="170px" style="padding:0 20px; width: 500px;">
+            <el-form-item :rules="[{required: true}]" label="车牌号">
+              <el-input v-model="addForm.LICENCE_NO" :autosize="{ minRows: 1}" type="text" maxlength="300" placeholder="这里输入车牌号..." @blur="goCheckLicenceNoAdd()"/>
+            </el-form-item>
+            <!-- 白牌、蓝牌、黄牌、绿牌、黑牌 下拉框-->
+            <el-form-item :rules="[{required: true}]" label="车牌类型" prop="LICENCE_TYPE">
+              <SelectTree
+                ref="selectTree_add2"
+                :clearable="false"
+                :options="licenceTypeList"
+                :props="vehicleDefaultProps"
+                v-model="addForm.LICENCE_TYPE"
+                placeholder="请选择车牌类型"
+                style="width: 300px"/>
+            </el-form-item>
+            <!-- 货车、轿车、大巴客车  下拉框-->
+            <el-form-item :rules="[{required: true}]" label="车辆类型" prop="VEHICLE_TYPE">
+              <SelectTree
+                ref="selectTree_add3"
+                :clearable="false"
+                :options="vehicleTypeList"
+                :props="vehicleDefaultProps"
+                v-model="addForm.VEHICLE_TYPE"
+                placeholder="请选择车辆类型"
+                style="width: 300px"/>
+            </el-form-item>
+            <!-- 员工车辆、单位车辆、外部车辆 下拉框 -->
+            <el-form-item :rules="[{required: true}]" label="车辆所属类型" prop="VEHICLE_BELONG_TYPE">
+              <SelectTree
+                ref="selectTree_add4"
+                :clearable="false"
+                :options="vehicleBelongTypeList"
+                :props="vehicleDefaultProps"
+                v-model="addForm.VEHICLE_BELONG_TYPE"
+                placeholder="请选择车辆所属类型"
+                style="width: 300px"/>
+            </el-form-item>
+            <!-- 车辆所属部门下拉框 -->
+            <el-form-item :rules="[{required: true}]" label="车辆所属部门" prop="VEHICLE_DEPARTMENT_ID">
+              <SelectTree
+                ref="selectTree_add1"
+                :clearable="false"
+                :options="treeData"
+                :props="defaultProps"
+                v-model="addForm.VEHICLE_DEPARTMENT_ID"
+                placeholder="请选择车辆所属部门"
+                style="width: 300px"
+                @change="addUserList"/>
+            </el-form-item>
+            <!-- 车辆责任人下拉框 -->
+            <el-form-item :rules="[{required: true}]" label="车辆责任人" prop="USER_ID">
+              <el-select :value="addForm.USER_ID" clearable placeholder="请选择" @visible-change="$forceUpdate()" @change="userIdAddChange">
+                <el-option v-for="item in userList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID"/>
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="addDialogCancelBtn">取 消</el-button>
+            <el-button type="primary" @click="addDialogConfirmBtn">确 定</el-button>
+          </div>
+        </el-dialog>
+        <el-dialog :visible.sync="editDialogVisible" title="修改" width="600px">
+          <el-form ref="editForm" :model="editForm" label-width="170px" style="width: 500px;">
+            <el-form-item :rules="[{required: true}]" label="车牌号">
+              <el-input v-model="editForm.LICENCE_NO" :autosize="{ minRows: 1}" type="text" maxlength="300" placeholder="这里输入车牌号..." @blur="goCheckLicenceNoUpdate()"/>
+            </el-form-item>
+            <el-form-item label="车牌类型" prop="LICENCE_TYPE">
+              <el-select :value="editForm.LICENCE_TYPE" clearable placeholder="请选择" @visible-change="$forceUpdate()">
+                <el-option v-for="item in licenceTypeList" :key="item.ID" :label="item.NAME" :value="item.ID" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="车辆类型" prop="VEHICLE_TYPE">
+              <el-select :value="editForm.VEHICLE_TYPE" clearable placeholder="请选择" @visible-change="$forceUpdate()">
+                <el-option v-for="item in vehicleTypeList" :key="item.ID" :label="item.NAME" :value="item.ID" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="车辆所属类型" prop="VEHICLE_BELONG_TYPE">
+              <el-select :value="editForm.VEHICLE_BELONG_TYPE" clearable placeholder="请选择" @visible-change="$forceUpdate()">
+                <el-option v-for="item in vehicleBelongTypeList" :key="item.ID" :label="item.NAME" :value="item.ID" />
+              </el-select>
+            </el-form-item>
+            <!-- 车辆所属部门下拉框 -->
+            <el-form-item label="车辆所属部门" prop="VEHICLE_DEPARTMENT_ID">
+              <SelectTree
+                ref="selectTree_edit"
+                :clearable="true"
+                :options="treeData"
+                :props="defaultProps"
+                v-model="editForm.VEHICLE_DEPARTMENT_ID"
+                placeholder="请选择车辆所属部门"
+                style="width: 300px"
+                @change="updateUserList"/>
+            </el-form-item>
+            <!-- 车辆责任人下拉框 -->
+            <el-form-item label="车辆责任人" prop="USER_ID">
+              <el-select :value="editForm.USER_ID" clearable placeholder="请选择" @visible-change="$forceUpdate()" @change="userIdUpdateChange">
+                <el-option v-for="item in userList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="editDialogCancelBtn">取 消</el-button>
+            <el-button type="primary" @click="editDialogConfirmBtn">提 交</el-button>
+          </div>
+        </el-dialog>
+        <el-dialog :visible.sync="detailDialogVisible" title="详情" width="600px">
+          <el-form ref="form" :model="detailForm" label-width="170px" style="width: 500px;">
+            <el-form-item label="车牌号">
+              <el-input v-model="detailForm.LICENCE_NO" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+            </el-form-item>
+            <el-form-item label="车牌类型">
+              <el-input v-model="detailForm.LICENCE_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+            </el-form-item>
+            <el-form-item label="车辆类型">
+              <el-input v-model="detailForm.VEHICLE_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+            </el-form-item>
+            <el-form-item label="车辆所属类型">
+              <el-input v-model="detailForm.VEHICLE_BELONG_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+            </el-form-item>
+            <el-form-item label="车辆所属部门">
+              <el-input v-model="detailForm.VEHICLE_DEPARTMENT_ID" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+            </el-form-item>
+            <el-form-item label="车辆责任人">
+              <el-input v-model="detailForm.USER_ID" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="detailDialogReturnBtn">返回</el-button>
+          </div>
+        </el-dialog>
+      </el-main>
+    </el-container>
+
+    <div class="heightt"/>
+    <!--    <div class="subdy-foot">-->
+    <!--      <el-row style="text-align: center">-->
+    <!--        <el-button @click="goReturn">返回</el-button>-->
+    <!--      </el-row>-->
+    <!--    </div>-->
+  </div>
+</template>
+
+<script>
+import SelectTree from '@/components/SelectTree'
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+export default {
+  components: { Pagination, SelectTree },
+  directives: { waves },
+  data() {
+    return {
+      config: config,
+      treeLoading: false,
+      listLoading: true,
+      add: true,
+      del: true,
+      edit: true,
+      readonly: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      total: 0,
+      defaultProps: {
+        value: 'id',
+        children: 'nodes',
+        label: 'name'
+      },
+      treeData: [],
+      // 从此处开始写自己的属性
+      loginUserCorpInfoId: '', // 从接口获取用户所属企业
+      CORPINFO_ID: '', // 企业id
+      DEPARTMENT_ID: '', // 部门ID
+      KEYWORDS: '',
+      loginUserId: '', // 登录人ID
+      // 车牌类型列表
+      licenceTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '白牌' },
+        { ID: '1', NAME: '蓝牌' },
+        { ID: '2', NAME: '黄牌' },
+        { ID: '3', NAME: '绿牌' },
+        { ID: '4', NAME: '黑牌' }
+      ],
+      // 车辆类型列表
+      vehicleTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '货车' },
+        { ID: '1', NAME: '轿车' },
+        { ID: '2', NAME: '大巴客车' }
+      ],
+      // 车辆所属类型列表
+      vehicleBelongTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '员工车辆' },
+        { ID: '1', NAME: '单位车辆' }
+        // { ID: '2', NAME: '外部车辆' }
+      ],
+      // 车辆下拉树默认属性
+      vehicleDefaultProps: {
+        value: 'ID',
+        label: 'NAME',
+        children: 'nodes'
+      },
+      departmentTreeData: [],
+      // inspectionTypeList: [], //字典列表
+      // 列表展示的数据
+      varList: [],
+      // 查询表单的数据
+      searchForm: {
+        DEPARTMENT_ID: '',
+        VEHICLE_ID: '', // 车辆ID(基础属性)
+        LICENCE_NO: '', // 车牌号
+        VEHICLE_TYPE: '', // 车辆类型
+        VEHICLE_DEPARTMENT_ID: '' // 车辆所属部门ID
+      },
+      // 添加表单的数据
+      addForm: {
+        LICENCE_NO: '', // 车牌号
+        VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门id
+        VEHICLE_DEPARTMENT_NAME: '', // 车辆所属部门名称
+        USER_ID: '', // 车辆责任人
+        LICENCE_TYPE: '', // 车牌类型
+        VEHICLE_TYPE: '', // 车辆类型
+        VEHICLE_BELONG_TYPE: '', // 车辆所属类型
+        EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人id
+        EMPLOYEE_VEHICLE_USER_NAME: '', // 车辆所属人姓名
+        DEPARTMENT_NAME: '', // 部门名称
+        DEPARTMENT_ID: '',
+        USER_NAME: '' // 车辆责任人姓名
+      },
+      // 修改表单的数据
+      editForm: {
+        VEHICLE_ID: '', // 车辆id(基础属性)
+        LICENCE_NO: '', // 车牌号
+        OLD_LICENCE_NO: '', // 修改前的车牌号
+        USER_ID: '', // 车辆责任人
+        USER_NAME: '', // 车辆责任人姓名
+        LICENCE_TYPE: '', // 车牌类型
+        VEHICLE_TYPE: '', // 车辆类型
+        VEHICLE_BELONG_TYPE: '', // 车辆所属类型
+        DEPARTMENT_NAME: '', // 车辆所属部门名称
+        EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人
+        EMPLOYEE_VEHICLE_USER_NAME: '', // 车辆所属人姓名
+        VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门
+        VEHICLE_DEPARTMENT_NAME: '' // 车辆所属部门名称
+      },
+      // 详情表单的数据
+      detailForm: {
+        LICENCE_NO: '', // 车牌号
+        VEHICLE_BELONG_TYPE: '', // 车辆所属类型
+        VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门
+        USER_ID: '', // 车辆责任人id
+        EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人
+        LICENCE_TYPE: null, // 车牌类型
+        VEHICLE_TYPE: null // 车辆类型
+      },
+      addDialogVisible: false, // 添加弹窗的展示与不展示
+      editDialogVisible: false, // 编辑弹窗的展示与不展示
+      detailDialogVisible: false, // 详情弹窗的展示与不展示
+      userList: [], // 部门用户列表
+      selectTree_edit: []
+    }
+  },
+  created() {
+    // this.getDepartmentTreeData() // 获取部门树的数据
+    // this.getDicList('qyztList', '07c2674470c1498ba1ebd74906b3b518')
+    // this.getDicList('industryList', 'f2598ba72e864eadabf0ca4b664d26b9')
+    // 调用自己的方法
+    this.getLoginUserInfo() // 获取当前登陆用户的信息
+    this.CORPINFO_ID = this.$parent.CORPINFO_ID
+    this.updateBranchName(this.CORPINFO_ID)
+    this.getPageList() // 获取分页列表要展示的数据
+
+  },
+  methods: {
+    // 判断按钮权限，用于是否显示按钮
+    // hasButton: function() {
+    //   var keys = 'corpinfo:add,corpinfo:del,corpinfo:edit,toExcel'
+    //   requestFN(
+    //     '/head/hasButton',
+    //     {
+    //       keys: keys
+    //     }
+    //   ).then((data) => {
+    //     this.add = data.corpinfofhadminadd		// 新增权限
+    //     this.del = data.corpinfofhadmindel		// 删除权限
+    //     this.edit = data.corpinfofhadminedit	// 权限
+    //   }).catch((e) => {
+    //     this.listLoading = false
+    //   })
+    // },
+    // 获取数据字典
+    // getDicList(list, DICTIONARIES_ID) {
+    //   requestFN(
+    //     '/dictionaries/getLevels',
+    //     {
+    //       DICTIONARIES_ID
+    //     }
+    //   ).then((data) => {
+    //     this[list] = data.list
+    //   }).catch((e) => {
+    //   })
+    // },
+    // 之前旧的
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    handleNodeClick(node, data, value) {
+      this.searchForm.VEHICLE_DEPARTMENT_ID = node.id
+      this.getPageList(node.id)
+    },
+    updateBranchName(ID) {
+      requestFN(
+        '/department/listTreeCorpInfo',
+        // '/department/listTree',
+        {
+          CORPINFO_ID: ID
+        }
+      ).then((data) => {
+        this.treeData = JSON.parse(data.zTreeNodes)
+      }).catch((e) => {
+      })
+    },
+    goReturn() {
+      this.$parent.activeName = 'IndexList'
+    },
+    // 从此处开始写自己的事件
+    getRowKey(row) {
+      return row.VEHICLE_ID
+    },
+    translateLicenceType(id) {
+      for (var i = 0; i < this.licenceTypeList.length; i++) {
+        if (this.licenceTypeList[i].ID == id) return this.licenceTypeList[i].NAME
+      }
+    },
+    translateVehicleType(id) {
+      for (var i = 0; i < this.vehicleTypeList.length; i++) {
+        if (this.vehicleTypeList[i].ID == id) return this.vehicleTypeList[i].NAME
+      }
+    },
+    translateVehicleBelongType(id) {
+      for (var i = 0; i < this.vehicleBelongTypeList.length; i++) {
+        if (this.vehicleBelongTypeList[i].ID == id) return this.vehicleBelongTypeList[i].NAME
+      }
+    },
+    getLoginUserInfo() { // 获取登录人信息
+      return new Promise((resolve) => {
+        requestFN(
+          '/user/goEditMyInfo',
+          {}
+        ).then((data) => {
+          console.info(data.pd)
+          this.loginUserId = data.pd.USER_ID
+          // this.loginUserName = data.pd.NAME
+          this.loginUserCorpInfoId = data.pd.CORPINFO_ID
+          // this.loginUserDepartmentName = data.pd.DEPARTMENT_NAME
+          resolve('ok')
+        }).catch((e) => {
+
+        })
+      })
+    },
+    // 搜索
+    getQuery() {
+      this.$refs.vehicleMessageTable.clearSelection() // 先置空表格再查询
+      this.getPageList()
+    },
+    goKeyReset() {
+      this.resetSearch()
+      this.getQuery()
+    },
+    // 获取列表
+    getPageList(DEPARTMENT_ID) {
+      this.listLoading = true
+      if (DEPARTMENT_ID) {
+        this.VEHICLE_DEPARTMENT_ID = DEPARTMENT_ID
+      }
+      requestFN(
+        'vehiclemessage/getPageList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          ...this.searchForm,
+          'CORPINFO_ID': this.CORPINFO_ID
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.varList
+        this.total = data.page.totalResult
+        // this.hasButton()
+        this.pd = data.pd
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    // 打开新增弹窗的新增按钮
+    openAddDialogAddBtn() {
+      this.addDialogVisible = true
+      this.reSetAddDialog()
+      this.ISCHECK = false
+    },
+    // 添加弹窗的取消按钮
+    addDialogCancelBtn() {
+      this.addDialogVisible = false
+    },
+    // 查看弹窗的返回按钮
+    detailDialogReturnBtn() {
+      this.detailDialogVisible = false
+    },
+    // 置空添加弹窗
+    reSetAddDialog() {
+      this.addForm.LICENCE_NO = ''
+      this.addForm.USER_ID = ''
+      this.addForm.VEHICLE_DEPARTMENT_ID = ''
+      this.addForm.LICENCE_TYPE = ''
+      this.addForm.VEHICLE_TYPE = ''
+      this.addForm.VEHICLE_BELONG_TYPE = ''
+      this.addForm.EMPLOYEE_VEHICLE_USER_ID = ''
+      this.userList = []
+      this.addForm.DEPARTMENT_NAME = ''
+      this.addForm.DEPARTMENT_ID = ''
+    },
+    // 添加弹窗的确定按钮
+    addDialogConfirmBtn() {
+      if (this.addForm.LICENCE_NO !== null && this.addForm.LICENCE_NO === '') {
+        this.$message({
+          message: '车牌号不能为空',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.LICENCE_TYPE !== null && this.addForm.LICENCE_TYPE === '') {
+        this.$message({
+          message: '请选择车牌类型',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.VEHICLE_TYPE !== null && this.addForm.VEHICLE_TYPE === '') {
+        this.$message({
+          message: '请选择车辆类型',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.VEHICLE_BELONG_TYPE !== null && this.addForm.VEHICLE_BELONG_TYPE === '') {
+        this.$message({
+          message: '请选择车辆所属类型',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.VEHICLE_DEPARTMENT_ID !== null && this.addForm.VEHICLE_DEPARTMENT_ID === '') {
+        this.$message({
+          message: '请选择车辆所属部门',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.USER_ID !== null && this.addForm.USER_ID === '') {
+        this.$message({
+          message: '请选择车辆责任人',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.VEHICLE_BELONG_TYPE === '0') {
+        this.addForm.EMPLOYEE_VEHICLE_USER_ID = this.addForm.USER_ID // 车辆所属人id
+        this.addForm.EMPLOYEE_VEHICLE_USER_NAME = this.addForm.USER_NAME // 车辆所属人姓名
+      } else {
+        this.addForm.EMPLOYEE_VEHICLE_USER_ID = '' // 车辆所属人id
+        this.addForm.EMPLOYEE_VEHICLE_USER_NAME = '' // 车辆所属人姓名
+      }
+      this.addRequest()
+    },
+    addRequest() {
+      requestFN(
+        'vehiclemessage/addVehicleMessage',
+        {
+          ...this.addForm,
+          'CORPINFO_ID': this.CORPINFO_ID
+        }
+      ).then((data) => {
+        if (data.result === 'fail') {
+          this.$message({
+            message: data.msg,
+            type: 'error'
+          })
+        } else {
+          this.$message.success('车辆信息添加成功')
+          this.getPageList() // 重新加载列表
+          this.addDialogVisible = false
+        }
+      }).catch((e) => {
+      })
+    },
+    // 打开编辑弹窗的编辑按钮
+    openEditDialogEditBtn(VEHICLE_ID) {
+      this.editForm = {
+        VEHICLE_ID: VEHICLE_ID, // 车辆id(基础属性)
+        LICENCE_NO: '', // 车牌号
+        OLD_LICENCE_NO: '', // 修改前的车牌号
+        USER_ID: '', // 车辆责任人
+        EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人
+        VEHICLE_DEPARTMENT_ID: '' // 车辆归属公司或责任公司（车辆所属部门）
+      }
+      this.userList = []
+      this.editDialogVisible = true
+      // 提供查询接口回显数据
+      requestFN(
+        'vehiclemessage/updateShowVehicleMessage',
+        {
+          VEHICLE_ID: VEHICLE_ID
+        }
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.editForm.LICENCE_NO = data.pd.LICENCE_NO // 车牌号
+          this.editForm.OLD_LICENCE_NO = data.pd.LICENCE_NO // 车牌号
+          this.editForm.USER_ID = data.pd.USER_ID // 车辆责任人
+          this.editForm.LICENCE_TYPE = String(data.pd.LICENCE_TYPE) // 车牌类型
+          this.editForm.VEHICLE_TYPE = String(data.pd.VEHICLE_TYPE) // 车辆类型
+          this.editForm.VEHICLE_BELONG_TYPE = data.pd.VEHICLE_BELONG_TYPE === undefined ? '' : data.pd.VEHICLE_BELONG_TYPE // 车辆所属类型
+          if ('VEHICLE_DEPARTMENT_ID' in data.pd) { // 存在车辆归属部门id
+            const node = {}
+            node.id = data.pd.VEHICLE_DEPARTMENT_ID
+            // this.$refs.selectTree_edit.clearHandle() // 这句代码会报错，注释掉了
+            this.editForm.VEHICLE_DEPARTMENT_ID = data.pd.VEHICLE_DEPARTMENT_ID
+            this.$nextTick(() => { // 此处使用这个可以等节点渲染后再获取节点
+              this.$refs.selectTree_edit.handleNodeClick(node)
+            })
+          }
+        } else {
+          this.$message({
+            message: '数据回显失败',
+            type: 'error'
+          })
+        }
+      }).catch((e) => {
+      })
+    },
+    editDialogCancelBtn() {
+      this.editDialogVisible = false
+    },
+    // 查看按钮(展示详情)
+    showDetail(VEHICLE_ID) {
+      this.detailForm = {
+        LICENCE_NO: '', // 车牌号
+        VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门
+        VEHICLE_BELONG_TYPE: '', // 车辆所属类型
+        USER_ID: '', // 车辆责任人
+        EMPLOYEE_VEHICLE_USER_ID: '', // 员工车辆所属人
+        LICENCE_TYPE: null, // 车牌类型
+        VEHICLE_TYPE: null // 车辆类型
+      }
+      this.detailDialogVisible = true
+      // 提供查询接口回显数据
+      requestFN(
+        'vehiclemessage/detailVehicleMessage',
+        {
+          VEHICLE_ID: VEHICLE_ID
+        }
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.detailForm.LICENCE_NO = data.pd.LICENCE_NO // 车牌号
+          this.detailForm.VEHICLE_DEPARTMENT_ID = data.pd.DEPARTMENT_NAME // 车辆所属部门
+          this.detailForm.LICENCE_TYPE = this.translateLicenceType(data.pd.LICENCE_TYPE) // 车牌类型
+          this.detailForm.VEHICLE_TYPE = this.translateVehicleType(data.pd.VEHICLE_TYPE) // 车辆类型
+          this.detailForm.VEHICLE_BELONG_TYPE = data.pd.VEHICLE_BELONG_TYPE === undefined ? '' : this.translateVehicleBelongType(data.pd.VEHICLE_BELONG_TYPE)
+          this.detailForm.USER_ID = data.pd.USER_NAME // 车辆责任人
+        } else {
+          this.$message({
+            message: '数据回显失败',
+            type: 'error'
+          })
+        }
+      }).catch((e) => {
+      })
+    },
+    // 修改弹窗的确定按钮
+    editDialogConfirmBtn() {
+      this.$refs.editForm.validate(valid => {
+        if (valid) {
+          const loading = this.$loading({
+            lock: true,
+            text: '数据保存中...',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)'
+          })
+          this.listLoading = true
+          requestFN(
+            'vehiclemessage/updateVehicleMessage',
+            {
+              ...this.editForm
+            }
+          ).then((data) => {
+            if (data.result === 'success') {
+              this.$message({
+                message: '修改成功',
+                type: 'success'
+              })
+            } else {
+              this.$message({
+                message: data.msg,
+                type: 'success'
+              })
+            }
+            this.listLoading = false
+            loading.close()
+            this.editDialogVisible = false
+            this.getQuery()
+          }).catch((e) => {
+            this.listLoading = false
+            loading.close()
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    // 删除单条数据的删除按钮
+    deleteSingleDataDeleteBtn(id, USER_ID, EMPLOYEE_VEHICLE_USER_ID) {
+      this.$confirm('确定要删除吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          'vehiclemessage/deleteVehicleMessage',
+          {
+            VEHICLE_ID: id,
+            USER_ID: USER_ID,
+            EMPLOYEE_VEHICLE_USER_ID: EMPLOYEE_VEHICLE_USER_ID
+          }
+        ).then((data) => {
+          if (data.result === 'success') {
+            this.$message({
+              message: '删除成功',
+              type: 'success'
+            })
+          } else {
+            this.$message({
+              message: data.msg,
+              type: 'success'
+            })
+          }
+          this.listLoading = false
+          this.varList = []
+          this.listQuery.page = 1
+          this.getPageList()
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    // 获取数据字典数据
+    // getDict: function() {
+    //   requestFN(
+    //     '/dictionaries/listSelectTree',
+    //     {
+    //       DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型
+    //     }
+    //   ).then((data) => {
+    //     this.inspectionTypeList = JSON.parse(data.zTreeNodes)
+    //   }).catch((e) => {
+    //
+    //   })
+    // },
+    // 获得部门树
+    getDepartmentTreeData() {
+      requestFN(
+        '/department/listTree',
+        {}
+      ).then((data) => {
+        this.departmentTreeData = JSON.parse(data.zTreeNodes)
+      }).catch((e) => {
+      })
+    },
+    resetSearch() {
+      this.searchForm = {
+        LICENCE_NO: '' // 车牌号（输入框）
+      }
+      this.$refs.selectTree_Search1.clearHandle() // 清空
+      this.$refs.selectTree_Search2.clearHandle()
+    },
+    addUserList(DEPARTMENT_ID) {
+      // this.getUserList(DEPARTMENT_ID)
+      this.customGetUserList(DEPARTMENT_ID)
+      this.handleDepartmentAddChange(DEPARTMENT_ID)
+    },
+    updateUserList(DEPARTMENT_ID) {
+      this.getUserList(DEPARTMENT_ID)
+      this.handleDepartmentUpdateChange(DEPARTMENT_ID)
+    },
+    getUserList(DEPARTMENT_ID) { // 根据部门获取部门内的人员
+      this.userList = []
+      console.info(DEPARTMENT_ID)
+      requestFN(
+        '/user/listAll',
+        {
+          DEPARTMENT_ID: DEPARTMENT_ID,
+          tm: new Date().getTime()
+        }
+      ).then((data) => {
+        console.info(data)
+        this.userList = data.userList
+      }).catch((e) => {
+        // this.listLoading = false
+      })
+    },
+    customGetUserList(DEPARTMENT_ID) { // 根据部门获取部门内的人员
+      this.userList = []
+      requestFN(
+        'vehiclemessage/selectTreeByDepartmentId',
+        {
+          DEPARTMENT_ID: DEPARTMENT_ID,
+          tm: new Date().getTime()
+        }
+      ).then((data) => {
+        this.userList = data.list
+      }).catch((e) => {
+        // this.listLoading = false
+      })
+    },
+    // 添加弹窗中的车辆责任人
+    userIdAddChange(event) {
+      this.addForm.USER_ID = event
+      this.handleUserAddChange(event)
+    },
+    // 添加弹窗中的车辆所属人
+    employeeUserIdAddChange(event) {
+      this.addForm.EMPLOYEE_VEHICLE_USER_ID = event
+      this.handleEmployeeUserAddChange(event)
+    },
+    // 修改弹窗中的车辆责任人
+    userIdUpdateChange(event) {
+      this.editForm.USER_ID = event
+      this.handleUserUpdateChange(event)
+    },
+    handleDepartmentAddChange(value) {
+      this.addForm.VEHICLE_DEPARTMENT_NAME = this.findLabelByValue(this.treeData, value)
+    },
+    handleDepartmentUpdateChange(value) {
+      this.editForm.VEHICLE_DEPARTMENT_NAME = this.findLabelByValue(this.treeData, value)
+    },
+    findLabelByValue(tree, value) {
+      for (const node of tree) {
+        if (node.id === value) {
+          return node.name
+        }
+        if (node.nodes && node.nodes.length > 0) {
+          const result = this.findLabelByValue(node.nodes, value)
+          if (result) {
+            return result
+          }
+        }
+      }
+      return ''
+    },
+    handleUserAddChange(value) {
+      const selectedUser = this.userList.find(user => user.USER_ID === value)
+      if (selectedUser) {
+        this.addForm.USER_NAME = selectedUser.NAME
+      } else {
+        this.addForm.USER_NAME = ''
+      }
+    },
+    handleEmployeeUserAddChange(value) {
+      const selectedUser = this.userList.find(user => user.USER_ID === value)
+      if (selectedUser) {
+        this.addForm.EMPLOYEE_VEHICLE_USER_NAME = selectedUser.NAME
+      } else {
+        this.addForm.EMPLOYEE_VEHICLE_USER_NAME = ''
+      }
+    },
+    handleUserUpdateChange(value) {
+      const selectedUser = this.userList.find(user => user.USER_ID === value)
+      if (selectedUser) {
+        this.editForm.USER_NAME = selectedUser.NAME
+      } else {
+        this.editForm.USER_NAME = ''
+      }
+    },
+    goCheckLicenceNoAdd() {
+      if (this.addForm.LICENCE_NO) {
+        const regex = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/
+        const result = regex.test(this.addForm.LICENCE_NO)
+        if (result) {
+          console.log('格式校验通过')
+          requestFN(
+            'vehiclemessage/goCheckLicenceNo',
+            {
+              'LICENCE_NO': this.addForm.LICENCE_NO
+            }
+          ).then((data) => {
+            if (data.result === 'success') {
+              this.$message.success('验证通过')
+              this.ISCHECK = true
+            } else {
+              this.$message.error('车牌号已存在,请重新输入')
+              this.ISCHECK = false
+            }
+          }).catch((e) => {
+            console.info(e)
+            this.listLoading = false
+            this.ISCHECK = false
+          })
+        } else {
+          this.$message.success('车牌号不规范')
+          this.ISCHECK = false
+        }
+      }
+    },
+    goCheckLicenceNoUpdate() {
+      if (this.editForm.LICENCE_NO) {
+        if (this.editForm.LICENCE_NO !== this.editForm.OLD_LICENCE_NO) {
+          const regex = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/
+          const result = regex.test(this.editForm.LICENCE_NO)
+          if (result) {
+            console.log('格式校验通过')
+            requestFN(
+              'vehiclemessage/goCheckLicenceNo',
+              {
+                'LICENCE_NO': this.editForm.LICENCE_NO
+              }
+            ).then((data) => {
+              if (data.result === 'success') {
+                this.$message.success('验证通过')
+                this.ISCHECK = true
+              } else {
+                this.$message.error('车牌号已存在,请重新输入')
+                this.ISCHECK = false
+              }
+            }).catch((e) => {
+              console.info(e)
+              this.listLoading = false
+              this.ISCHECK = false
+            })
+          } else {
+            this.$message.success('车牌号不规范')
+            this.ISCHECK = false
+          }
+        }
+      }
+    },
+    // 车辆进出记录按钮的点击事件
+    vehicleInOutRecordBtn(LICENCE_NO) {
+      this.$parent.activeName = 'Record'
+      this.$parent.LICENCE_NO = LICENCE_NO
+    }
+  }
+}
+</script>
+<style>
+.m-l-10 {
+  margin-left: 10px;
+}
+.q-f-w-v-200{
+  width: 200px;
+}
+</style>
diff --git a/src/views/longtermvehicle/vehiclemessage/components/record.vue b/src/views/longtermvehicle/vehiclemessage/components/record.vue
new file mode 100644
index 0000000..dcd76ee
--- /dev/null
+++ b/src/views/longtermvehicle/vehiclemessage/components/record.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="100px">
+      <el-row>
+        <el-col :span="2">
+          <el-form-item label-width="0px">
+            <el-button icon="el-icon-arrow-left" @click="goReturn()">返回</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="口门名称：" label-width="110px">
+            <el-input v-model="searchForm.KEYWORDS" style="width:206px" placeholder="请输入内容"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
+          <el-form-item label="口门状态" label-width="110px">
+            <el-select v-model="searchForm.GATE_STATUS" placeholder="请选择">
+              <el-option v-for="(item,index) in StatusList" :key="index" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
+          <el-form-item label="所属区域" label-width="110px">
+            <el-select v-model="searchForm.REGION_BIANMA" placeholder="请选择">
+              <el-option v-for="(item,index) in RegionList" :key="index" :label="item.NAME" :value="item.BIANMA"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label-width="10px">
+            <el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
+              搜索
+            </el-button>
+            <el-button v-waves type="success" icon="el-icon-refresh" @click="goKeyReset">
+              重置
+            </el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table
+      v-loading="listLoading"
+      ref="queryTable"
+      :data="varList"
+      :cell-style="getPlateColor"
+      :row-key="getRowKey"
+      :header-cell-style="{
+        'font-weight': 'bold',
+        'color': '#000'
+      }"
+      tooltip-effect="dark"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column
+        :reserve-selection="true"
+        type="selection"
+        width="55"
+        align="center"/>
+      <el-table-column type="index" label="序号" width="50" align="center" />
+      <el-table-column prop="REGION_NAME" label="区域" width="100px" align="center"/>
+      <el-table-column prop="AREA_NAME" label="口门名称" width="100px" align="center"/>
+      <el-table-column prop="AREA_LEVEL_NAME" label="口门级别" width="100px" align="center"/>
+      <el-table-column prop="vehicle_plate_number" label="车牌号" width="100px" align="center"/>
+      <!--      <el-table-column prop="vehicle_category_name" label="车辆类型" width="150px" align="center"/>-->
+      <el-table-column prop="VEHICLE_TYPE_NAME" label="车辆类型" width="150px" align="center"/>
+      <!--      <el-table-column prop="vehicle_filing_method" label="车辆所属类型" width="100px" align="center"/>-->
+      <el-table-column prop="VEHICLE_BELONG_TYPE_NAME" label="车辆所属类型" width="100px" align="center"/>
+      <el-table-column prop="vehicle_arrival_status" label="车辆在港状态" width="100px" align="center"/>
+      <el-table-column prop="VEHICLE_DEPARTMENT_NAME" label="车辆所属部门" align="center"/>
+      <!--      <el-table-column prop="vehicle_filing_info_recording_org" label="车辆所属部门" align="center"/>-->
+      <el-table-column prop="USER_NAME" label="车辆责任人" width="150ox" align="center"/>
+      <!--      <el-table-column prop="vehicle_contact_name" label="车辆联系人" width="150ox" align="center"/>-->
+      <!--      <el-table-column prop="vehicle_contact_phone_number" label="联系人手机号" width="120px" align="center"/>-->
+      <el-table-column prop="vehicle_arrival_barrier" label="入港闸口" align="center"/>
+      <el-table-column prop="vehicle_arrival_time" label="入港时间" align="center"/>
+      <el-table-column prop="vehicle_departure_barrier" label="离港闸口" align="center"/>
+      <el-table-column prop="vehicle_departure_time" label="离港时间" align="center"/>
+    </el-table>
+    <div class="page-btn-group">
+      <!--      <div>-->
+      <!--        <el-button plain type="info" @click="returnBtn">返回</el-button>-->
+      <!--      </div>-->
+      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getPageList" />
+    </div>
+  </div>
+</template>
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+import safetyFlowChart from '../../../hiddenUtil/safetyFlowChart'
+export default {
+  components: { Pagination, safetyFlowChart },
+  directives: { waves },
+  data() {
+    return {
+      listLoading: true,
+      add: false,
+      del: false,
+      edit: false,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      total: 0,
+      KEYWORDS: '',
+      // 列表展示的数据
+      varList: [],
+      // 查询表单的数据
+      searchForm: {
+        LICENCE_NO: '', // 车牌号
+        KEYWORDS: '',
+        GATE_STATUS: '',
+        REGION_BIANMA: ''
+      },
+      RegionList: [],
+      StatusList: [
+        { value: '0', label: '停用' },
+        { value: '1', label: '正常' },
+        { value: '2', label: '暂时关闭' }
+      ]
+    }
+  },
+  created() {
+    this.getDict()
+    this.searchForm.LICENCE_NO = this.$parent.LICENCE_NO
+    this.getPageList() // 获取分页列表要展示的数据
+  },
+  methods: {
+    getRowKey(row) {
+      return row.id_sequence
+    },
+    // 搜索
+    getQuery() {
+      this.$refs.queryTable.clearSelection() // 先置空表格再查询
+      this.getPageList()
+    },
+    resetSearch() {
+      this.searchForm.KEYWORDS = ''
+      this.searchForm.GATE_STATUS = ''
+      this.searchForm.REGION_BIANMA = ''
+    },
+    goKeyReset() {
+      this.resetSearch()
+      this.getQuery()
+    },
+    // 获取列表
+    getPageList() {
+      this.listLoading = true
+      requestFN(
+        '/vehiclemessage/getInOutPageList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          ...this.searchForm
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.varList
+        this.total = data.page.totalResult
+        // this.hasButton()
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    // 车辆进出记录按钮的点击事件
+    returnBtn() {
+      this.$parent.activeName = 'List'
+    },
+    getPlateColor(row, column, rowIndex, columnIndex) {
+      if (row.column.label === '车牌号') {
+        const colorMap = {
+          蓝牌: 'background-color: blue;color: white',
+          黄牌: 'background-color: yellow;color: black',
+          新能源: 'background-color: green;color: white',
+          白牌: 'background-color: gray;color: black',
+          黑牌: 'background-color: black;color: white',
+          其他: 'background-color: white;color: black',
+          default: 'background-color: white;color: black'
+        }
+        // const plateColor = row.row.vehicle_plate_color || 'default'
+        const plateColor = row.row.LICENCE_TYPE_NAME || 'default'
+        const backgroundColorAndColor = colorMap[plateColor] || colorMap.default
+        return backgroundColorAndColor
+      }
+    },
+    goReturn() {
+      this.$parent.activeName = 'IndexView'
+    },
+    getDict() {
+      requestFN(
+        'dictionaries/getLevels',
+        {
+          DICTIONARIES_ID: '1c73fa2717f2835165104aee234caefe'
+        }
+      ).then((data) => {
+        this.RegionList = data.list
+      })
+        .catch((e) => {
+          this.listLoading = false
+        })
+    },
+  }
+}
+</script>
diff --git a/src/views/longtermvehicle/vehiclemessage/index.vue b/src/views/longtermvehicle/vehiclemessage/index.vue
new file mode 100644
index 0000000..a024fc3
--- /dev/null
+++ b/src/views/longtermvehicle/vehiclemessage/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <IndexList v-show="activeName=='IndexList'" ref="list" />
+    <IndexView v-if="activeName=='IndexView'" />
+    <!--    <List v-show="activeName==='List'" />-->
+    <Record v-if="activeName==='Record'" />
+  </div>
+</template>
+
+<script>
+import IndexList from './components/indexList'
+import IndexView from './components/index_view'
+// import List from './components/list'
+import Record from './components/record'
+export default {
+  components: {
+    IndexList,
+    IndexView,
+    // List,
+    Record
+  },
+  data() {
+    return {
+      activeName: 'IndexList',
+      INSPECTION_ID: '',
+      LICENCE_NO: '',
+      indexVal: ''
+    }
+  },
+  watch: {
+    activeName(newValue, oldValue) {
+      if (newValue == 'IndexList') {
+        this.$refs.list.getQuery()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/vehiclebreakrules/blacklist/components/list.vue b/src/views/vehiclebreakrules/blacklist/components/list.vue
new file mode 100644
index 0000000..0e1c515
--- /dev/null
+++ b/src/views/vehiclebreakrules/blacklist/components/list.vue
@@ -0,0 +1,451 @@
+<template>
+  <div class="app-container">
+    <!-- 查询列表-->
+    <el-form label-width="100px">
+      <el-row>
+        <el-col :span="4">
+          <el-form-item label="车牌号">
+            <el-input v-model="searchFrom.LICENCE_NO" placeholder="请输入车牌号..." />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="车辆责任人">
+            <el-input v-model="searchFrom.USER_NAME" placeholder="请输入车辆责任人..." />
+          </el-form-item>
+        </el-col>
+        <!--        <el-col :span="4">-->
+        <!--          <el-form-item label="违规类型" prop="VIOLATION_TYPE">-->
+        <!--            <SelectTree-->
+        <!--              ref="selectTree_Search2"-->
+        <!--              :clearable="false"-->
+        <!--              :options="violationTypeList"-->
+        <!--              :props="oneselfDefaultProps"-->
+        <!--              v-model="searchFrom.VIOLATION_TYPE"-->
+        <!--              placeholder="请选择违规类型"/>-->
+        <!--          </el-form-item>-->
+        <!--        </el-col>-->
+        <el-col :span="4">
+          <el-form-item label-width="10px">
+            <el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
+              搜索
+            </el-button>
+            <el-button v-waves type="success" icon="el-icon-refresh" @click="goKeyReset">
+              重置
+            </el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 分页列表 -->
+    <el-table
+      v-loading="listLoading"
+      ref="vehicleMessageTable"
+      :data="varList"
+      :row-key="getRowKey"
+      :header-cell-style="{
+        'font-weight': 'bold',
+        'color': '#000'
+      }"
+      tooltip-effect="dark"
+      border
+      fit
+      highlight-current-row>
+      <el-table-column
+        :reserve-selection="true"
+        type="selection"
+        width="55"
+        align="center"/>
+      <el-table-column type="index" label="序号" width="50" align="center" />
+      <el-table-column prop="CORPINFO_NAME" label="分公司名称" align="center" />
+      <el-table-column prop="LICENCE_NO" label="车牌号" align="center" />
+      <el-table-column label="车牌类型" align="center">
+        <template slot-scope="{row}">
+          {{ translateLicenceType(row.LICENCE_TYPE) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="车辆类型" align="center">
+        <template slot-scope="{row}">
+          {{ translateVehicleType(row.VEHICLE_TYPE) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="VEHICLE_DEPARTMENT_NAME" label="车辆所属部门" align="center"/>
+      <el-table-column prop="USER_NAME" label="车辆责任人" align="center"/>
+      <el-table-column prop="ISEXIST" label="是否存在" align="center" />
+      <el-table-column label="操作" align="center" width="480">
+        <template slot-scope="{row}">
+          <el-button icon="el-icon-view" size="mini" @click="showDetail(row.BLACK_LIST_ID)">详情</el-button>
+          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSingleDataDeleteBtn(row.BLACK_LIST_ID, row.VEHICLE_ID)">移除黑名单</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="page-btn-group">
+      <div>
+        <el-button type="primary" icon="el-icon-plus" @click="openAddDialogAddBtn">新增</el-button>
+      </div>
+      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getPageList" />
+    </div>
+    <!--  添加黑名单  -->
+    <el-dialog :visible.sync="addDialogVisible" title="添加黑名单" width="600px">
+      <el-form v-if="addDialogVisible" ref="addForm" :model="addForm" label-width="170px" style="padding:0 20px; width: 500px;">
+        <el-form-item :rules="[{required: true}]" label="车牌号" label-width="110px">
+          <el-input v-model="addForm.LICENCE_NO" :autosize="{ minRows: 1}" type="text" maxlength="300" placeholder="这里输入车牌号..." @blur="goCheckLicenceNo()"/>
+        </el-form-item>
+        <!-- 白牌、蓝牌、黄牌、绿牌、黑牌 下拉框-->
+        <el-form-item label="车牌类型" label-width="110px" prop="LICENCE_TYPE">
+          <SelectTree
+            ref="selectTree_add2"
+            :clearable="false"
+            :options="licenceTypeList"
+            :props="oneselfDefaultProps"
+            v-model="addForm.LICENCE_TYPE"
+            placeholder="请选择车牌类型"
+            style="width: 300px"/>
+        </el-form-item>
+        <!-- 货车、轿车、大巴客车 下拉框-->
+        <el-form-item label="车辆类型" label-width="110px" prop="VEHICLE_TYPE">
+          <SelectTree
+            ref="selectTree_add3"
+            :clearable="false"
+            :options="vehicleTypeList"
+            :props="oneselfDefaultProps"
+            v-model="addForm.VEHICLE_TYPE"
+            placeholder="请选择车辆类型"
+            style="width: 300px"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addDialogCancelBtn">取 消</el-button>
+        <el-button type="primary" @click="addDialogConfirmBtn">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!--  查看黑名单详情  -->
+    <el-dialog :visible.sync="detailDialogVisible" title="查看详情" width="600px">
+      <el-form label-width="170px" style="padding:0 20px; width: 500px;">
+        <!-- 违规类型：（0-未按规定车道行驶，1-违规停车）-->
+        <el-form-item label="车牌号" label-width="130px">
+          <el-input v-model="detailForm.LICENCE_NO" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+        </el-form-item>
+        <el-form-item label="车牌类型" label-width="130px">
+          <el-input v-model="detailForm.LICENCE_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+        </el-form-item>
+        <el-form-item label="车辆类型" label-width="130px" prop="DESCRIBE_MESSAGE" >
+          <el-input :rows="3" v-model="detailForm.VEHICLE_TYPE" :disabled="true" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="detailDialogCloseBtn">返回</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+import WriteSign from '@/components/WriteSign'
+import SelectTree from '@/components/SelectTree'
+import safetyFlowChart from '../../../hiddenUtil/safetyFlowChart'
+export default {
+  components: { Pagination, WriteSign, safetyFlowChart, SelectTree },
+  directives: { waves },
+  data() {
+    return {
+      ISCHECK: false, // 校验车牌号是否规范
+      listLoading: true,
+      add: false,
+      del: false,
+      edit: false,
+      detailDialogVisible: false,
+      loginUserId: '', // 当前登陆用户的id
+      loginUserName: '', // 当前登陆用户的名称
+      loginUserCorpInfoId: '', // 当前登陆用户的分公司id
+      // 分页列表相关的三个属性
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      total: 0,
+      varList: [], // 列表数据
+      // 部门树的数据和默认属性
+      departmentTreeData: [],
+      defaultProps: {
+        value: 'id',
+        children: 'nodes',
+        label: 'name'
+      },
+      // 查询表单的数据
+      searchFrom: {
+        LICENCE_NO: '', // 车牌号
+        USER_NAME: '', // 车辆类型
+        VIOLATION_TYPE: '' // 违规类型
+      },
+      // 添加表单的数据
+      addForm: {
+        LICENCE_NO: '', // 车牌号
+        VIOLATION_TYPE: '', // 违规类型
+        VIOLATIONTIME: '', // 最后一次违规时间
+        LICENCE_TYPE: '', // 车牌类型
+        VEHICLE_TYPE: '', // 车辆类型
+        DESCRIBE_MESSAGE: '' // 违规说明
+      },
+      // 详情弹窗
+      detailForm: {
+        LICENCE_NO: '', // 车牌号
+        LICENCE_TYPE: '', // 车牌类型
+        VEHICLE_TYPE: '' // 车辆类型
+      },
+      // 违规类型列表
+      violationTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '未按规定车道行驶' },
+        { ID: '1', NAME: '违规停车' }
+      ],
+      // 车辆类型列表
+      vehicleTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '货车' },
+        { ID: '1', NAME: '轿车' },
+        { ID: '2', NAME: '大巴客车' }
+      ],
+      // 车牌类型列表
+      licenceTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '白牌' },
+        { ID: '1', NAME: '蓝牌' },
+        { ID: '2', NAME: '黄牌' },
+        { ID: '3', NAME: '绿牌' },
+        { ID: '4', NAME: '黑牌' }
+      ],
+      // 自定义的下拉树默认属性
+      oneselfDefaultProps: {
+        value: 'ID',
+        label: 'NAME',
+        children: 'nodes'
+      },
+      addDialogVisible: false,
+      dialogImageVisible: false, // 放大照片的显示和隐藏
+      violation_files: [],
+      dialogImageUrl: '' // 照片的地址
+    }
+  },
+  created() {
+    this.getLoginUserInfo() // 获取当前登陆用户的信息
+    // this.getDict() // 获取字典
+    this.getDepartmentTreeData() // 获取部门树的数据
+    this.getPageList() // 获取分页列表要展示的数据
+  },
+  methods: {
+    // 获取并设置列表行的主键ID
+    getRowKey(row) {
+      return row.BLACK_LIST_ID
+    },
+    // 获取数据字典数据
+    // getDict: function() {
+    //   requestFN(
+    //     '/dictionaries/listSelectTree',
+    //     {
+    //       DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型
+    //     }
+    //   ).then((data) => {
+    //     this.inspectionTypeList = JSON.parse(data.zTreeNodes)
+    //   }).catch((e) => {
+    //
+    //   })
+    // },
+    // 获得部门树
+    getDepartmentTreeData() {
+      requestFN(
+        '/department/listTree',
+        {}
+      ).then((data) => {
+        this.departmentTreeData = JSON.parse(data.zTreeNodes)
+      }).catch((e) => {
+      })
+    },
+    getLoginUserInfo() { // 获取登录人信息
+      return new Promise((resolve) => {
+        requestFN(
+          '/user/goEditMyInfo',
+          {}
+        ).then((data) => {
+          this.loginUserId = data.pd.USER_ID
+          this.loginUserName = data.pd.NAME
+          this.loginUserCorpInfoId = data.pd.CORPINFO_ID
+          resolve('ok')
+        }).catch((e) => {
+
+        })
+      })
+    },
+    // 搜索按钮的点击事件
+    getQuery() {
+      // vehicleMessageTable 需要置空表格的ref值
+      this.$refs.vehicleMessageTable.clearSelection() // 先置空表格再查询
+      this.getPageList()
+    },
+    // 重置搜索表单按钮的点击事件
+    goKeyReset() {
+      this.resetSearch() // 重置搜索表单按钮的点击事件
+      this.getQuery() // 根据查询参数重新获取列表数据
+    },
+    // 表单控件的置空操作
+    resetSearch() {
+      this.searchFrom.LICENCE_NO = '' // 清空下拉框
+      this.searchFrom.USER_NAME = '' // 车辆责任人
+      // this.$refs.selectTree_Search2.clearHandle()
+    },
+    // 获取分页列表的数据
+    getPageList() {
+      this.listLoading = true
+      requestFN(
+        'blackListManage/getPageList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          ...this.searchFrom
+          // 'CORPINFO_ID': this.loginUserCorpInfoId
+        }
+      ).then((data) => {
+        this.listLoading = false
+        console.info('输出获取到的数据')
+        console.log(data)
+        this.varList = data.varList
+        this.total = data.page.totalResult
+        // this.hasButton()
+        this.pd = data.pd
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    // 打开新增弹窗的新增按钮
+    openAddDialogAddBtn() {
+      this.addDialogVisible = true
+      this.reSetAddDialog()
+    },
+    // 添加弹窗的取消按钮
+    addDialogCancelBtn() {
+      this.addDialogVisible = false
+    },
+    reSetAddDialog() {
+      this.addForm.LICENCE_NO = ''
+      this.addForm.VIOLATION_TYPE = ''
+      this.addForm.VIOLATIONTIME = ''
+      this.addForm.DESCRIBE_MESSAGE = ''
+      this.addForm.LICENCE_TYPE = '' // 车牌类型
+      this.addForm.VEHICLE_TYPE = '' // 车辆类型
+    },
+    // 添加弹窗的确定按钮
+    addDialogConfirmBtn() {
+      if (this.addForm.LICENCE_NO !== null && this.addForm.LICENCE_NO === '') {
+        this.$message({
+          message: '车牌号不能为空',
+          type: 'error'
+        })
+        return false
+      }
+      this.sendRequest()
+    },
+    sendRequest() {
+      this.$refs.addForm.validate(valid => {
+        requestFN(
+          'blackListManage/addBlackList',
+          {
+            ...this.addForm
+            // 'CORPINFO_ID': this.loginUserCorpInfoId
+          }
+        ).then((data) => {
+          if (data.result === 'fail') {
+            this.$message({
+              message: data.msg,
+              type: 'error'
+            })
+          } else {
+            this.addDialogVisible = false
+            this.getPageList() // 重新加载列表
+          }
+          this.listLoading = false
+        }).catch((e) => {
+        })
+      })
+    },
+    translateVehicleType(id) {
+      for (var i = 0; i < this.vehicleTypeList.length; i++) {
+        if (this.vehicleTypeList[i].ID == id) return this.vehicleTypeList[i].NAME
+      }
+    },
+    translateLicenceType(id) {
+      for (var i = 0; i < this.licenceTypeList.length; i++) {
+        if (this.licenceTypeList[i].ID == id) return this.licenceTypeList[i].NAME
+      }
+    },
+    // 违规类型
+    translateViolationType(id) {
+      for (var i = 0; i < this.violationTypeList.length; i++) {
+        if (this.violationTypeList[i].ID == id) return this.violationTypeList[i].NAME
+      }
+    },
+    reSetDetail() {
+      this.detailForm.LICENCE_NO = ''
+      this.detailForm.LICENCE_TYPE = ''
+      this.detailForm.VEHICLE_TYPE = ''
+    },
+    showDetail(BLACK_LIST_ID) {
+      this.detailDialogVisible = true
+      this.reSetDetail()
+      requestFN(
+        'blackListManage/detailBlackList',
+        {
+          'BLACK_LIST_ID': BLACK_LIST_ID
+        }
+      ).then((data) => {
+        this.detailForm.LICENCE_NO = data.pd.LICENCE_NO
+        this.detailForm.LICENCE_TYPE = this.translateLicenceType(data.pd.LICENCE_TYPE)
+        this.detailForm.VEHICLE_TYPE = this.translateVehicleType(data.pd.VEHICLE_TYPE)
+      })
+    },
+    detailDialogCloseBtn() {
+      this.detailDialogVisible = false
+    },
+    deleteSingleDataDeleteBtn(BLACK_LIST_ID, VEHICLE_ID) {
+      requestFN(
+        'blackListManage/delBlackList',
+        {
+          'BLACK_LIST_ID': BLACK_LIST_ID,
+          'VEHICLE_ID': VEHICLE_ID
+        }
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+          this.getPageList()
+        } else {
+          this.$message({
+            message: data.msg,
+            type: 'error'
+          })
+        }
+      })
+    },
+    // 检查车牌号是否规范
+    goCheckLicenceNo() {
+      if (this.addForm.LICENCE_NO === '') {
+        this.$message.success('请输入车牌号')
+        this.ISCHECK = false
+      } else {
+        const regex = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/
+        const result = regex.test(this.addForm.LICENCE_NO)
+        if (result) {
+          this.$message.success('验证通过')
+          this.ISCHECK = true
+        } else {
+          this.$message.success('车牌号不规范')
+          this.ISCHECK = false
+        }
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/src/views/vehiclebreakrules/blacklist/index.vue b/src/views/vehiclebreakrules/blacklist/index.vue
new file mode 100644
index 0000000..c45ea58
--- /dev/null
+++ b/src/views/vehiclebreakrules/blacklist/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <List v-show="activeName==='List'" ref="list" />
+  </div>
+</template>
+
+<script>
+import List from './components/list'
+export default {
+  components: {
+    List
+  },
+  data() {
+    return {
+      activeName: 'List',
+      VEHICLE_ID: '' // 车辆id
+    }
+  },
+  watch: {
+    activeName(newValue, oldValue) {
+      if (newValue == 'List') {
+        this.$refs.list.getQuery()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/vehiclebreakrules/records/components/info.vue b/src/views/vehiclebreakrules/records/components/info.vue
new file mode 100644
index 0000000..8fb1946
--- /dev/null
+++ b/src/views/vehiclebreakrules/records/components/info.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="app-container">
+    <div class="page-btn-group">
+      <div>
+        <el-button plain type="info" icon="el-icon-arrow-left" class="return-btn" @click="detailListReturnBtn">返回</el-button>
+      </div>
+    </div>
+    <!-- 违规详情列表 -->
+    <el-table
+      v-loading="listLoading"
+      ref="vehicleViolationTable"
+      :data="varList"
+      :row-key="getRowKey"
+      :header-cell-style="{
+        'font-weight': 'bold',
+        'color': '#000'
+      }"
+      tooltip-effect="dark"
+      border
+      fit
+      highlight-current-row>
+      <el-table-column
+        :reserve-selection="true"
+        type="selection"
+        width="55"
+        align="center"/>
+      <el-table-column type="index" label="序号" width="50" align="center" />
+      <el-table-column label="违规类型" align="center" width="120">
+        <template slot-scope="{row}">
+          {{ translateLicenceType(row.VIOLATION_TYPE) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="LOCATION" label="违规区域" align="center" />
+      <el-table-column prop="VIOLATIONTIME" label="违规时间" width="150" align="center" />
+      <el-table-column prop="DESCRIBE_MESSAGE" label="违规说明" align="center" />
+      <el-table-column label="操作" align="center" width="300">
+        <template slot-scope="{row}">
+          <el-button icon="el-icon-view" size="mini" @click="showDetail(row.VIOLATION_ID)">详情</el-button>
+          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSingleDataDeleteBtn(row.VIOLATION_ID)">清除违规记录</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!--  查看详情  -->
+    <el-dialog :visible.sync="detailDialogVisible" title="查看详情" width="600px">
+      <el-form label-width="170px" style="padding:0 20px; width: 500px;">
+        <!-- 违规类型：（0-未按规定车道行驶，1-违规停车）-->
+        <el-form-item label="违规类型" label-width="110px">
+          <el-input v-model="detailForm.VIOLATION_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+        </el-form-item>
+        <el-form-item label="违规时间" label-width="110px">
+          <el-input v-model="detailForm.VIOLATIONTIME" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+        </el-form-item>
+        <el-form-item label="违规区域" label-width="110px" prop="LOCATION">
+          <el-input :rows="3" v-model="detailForm.LOCATION" :disabled="true" type="textarea"/>
+        </el-form-item>
+        <el-form-item label="违规照片" label-width="110px" prop="LOCATION">
+          <viewer :images="detailForm.FILEPATHS">
+            <img v-for="(item,index) in detailForm.FILEPATHS" :src="config.fileUrl + item" :key="index" width="100" style="margin-left: 3px" height="100">
+          </viewer>
+        </el-form-item>
+        <el-form-item label="违规说明" label-width="110px" prop="DESCRIBE_MESSAGE" >
+          <el-input :rows="3" v-model="detailForm.DESCRIBE_MESSAGE" :disabled="true" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="detailDialogCloseBtn">返回</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+import WriteSign from '@/components/WriteSign'
+import SelectTree from '@/components/SelectTree'
+import safetyFlowChart from '../../../hiddenUtil/safetyFlowChart'
+export default {
+  components: { Pagination, WriteSign, safetyFlowChart, SelectTree },
+  directives: { waves },
+  data() {
+    return {
+      config: config,
+      imageError: false,
+      listLoading: true,
+      add: false,
+      del: false,
+      edit: false,
+      varList: [], // 列表数据
+      detailDialogVisible: false, // 查看详情的弹窗
+      // 违规类型列表
+      violationTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '未按规定车道行驶' },
+        { ID: '1', NAME: '违规停车' }
+      ],
+      // 详情弹窗
+      detailForm: {
+        VIOLATION_TYPE: '', // 违规类型
+        LOCATION: '', // 违规区域
+        DESCRIBE_MESSAGE: '', // 违规说明
+        VIOLATIONTIME: '', // 违规时间
+        FILEPATH: '', // 单张违规照片
+        FILEPATHS: [] // 多张违规照片
+      }
+    }
+  },
+  created() {
+    this.getList() // 获取分页列表要展示的数据
+  },
+  methods: {
+    // 获取并设置列表行的主键ID
+    getRowKey(row) {
+      return row.VIOLATION_ID
+    },
+    // 获取列表的数据
+    getList() {
+      this.listLoading = true
+      requestFN(
+        '/breakRulesRecord/getDetailList',
+        {
+          'VEHICLE_ID': this.$parent.VEHICLE_ID
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.varList
+        // this.total = data.page.totalResult
+        // this.hasButton()
+        // this.pd = data.pd
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    // 打开详情弹窗的详情按钮
+    openAddDialogDetailBtn() {
+      this.reSetDetailDialog()
+      this.detailDialogVisible = true
+    },
+    // 添加弹窗的取消按钮
+    detailDialogCloseBtn() {
+      this.detailDialogVisible = false
+    },
+    detailListReturnBtn() {
+      this.$parent.activeName = 'List'
+    },
+    reSetDetailDialog() {
+      this.detailForm.VIOLATION_TYPE = ''
+      this.detailForm.LOCATION = ''
+      this.detailForm.FILEPATH = ''
+      this.detailForm.VIOLATIONTIME = ''
+      this.detailForm.DESCRIBE_MESSAGE = ''
+      this.detailForm.FILEPATHS = []
+    },
+    translateLicenceType(id) {
+      for (var i = 0; i < this.violationTypeList.length; i++) {
+        if (this.violationTypeList[i].ID == id) return this.violationTypeList[i].NAME
+      }
+    },
+    showDetail(VIOLATION_ID) {
+      this.detailDialogVisible = true
+      requestFN(
+        '/breakRulesRecord/getDetail',
+        {
+          'VIOLATION_ID': VIOLATION_ID
+        }
+      ).then((data) => {
+        this.detailForm.VIOLATION_TYPE = this.translateLicenceType(data.pd.VIOLATION_TYPE)
+        this.detailForm.FILEPATH = this.config.fileUrl + data.pd.FILEPATH
+        this.detailForm.DESCRIBE_MESSAGE = data.pd.DESCRIBE_MESSAGE
+        this.detailForm.LOCATION = data.pd.LOCATION
+        this.detailForm.VIOLATIONTIME = data.pd.VIOLATIONTIME
+        this.detailForm.FILEPATHS = data.FILEPATHS
+      })
+    },
+    // 清除违规记录
+    deleteSingleDataDeleteBtn(VIOLATION_ID) {
+      requestFN(
+        '/breakRulesRecord/deleteRecord',
+        {
+          'VIOLATION_ID': VIOLATION_ID
+        }
+      ).then((data) => {
+        if (data.result == 'error') {
+          this.$message({
+            message: '违规记录清除失败',
+            type: 'error'
+          })
+          return false
+        } else {
+          this.$refs.vehicleViolationTable.clearSelection() // 先置空表格再查询
+          this.getList() // 重新加载列表
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+  .return-btn{
+    margin-bottom: 10px;
+  }
+</style>
diff --git a/src/views/vehiclebreakrules/records/components/list.vue b/src/views/vehiclebreakrules/records/components/list.vue
new file mode 100644
index 0000000..11e8dd8
--- /dev/null
+++ b/src/views/vehiclebreakrules/records/components/list.vue
@@ -0,0 +1,567 @@
+<template>
+  <div class="app-container">
+    <!-- 查询列表-->
+    <el-form label-width="100px">
+      <el-row>
+        <el-col :span="4">
+          <el-form-item label="车牌号">
+            <el-input v-model="searchFrom.LICENCE_NO" placeholder="请输入车牌号..." />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="车辆类型" prop="VEHICLE_TYPE">
+            <SelectTree
+              ref="selectTree_Search1"
+              :clearable="false"
+              :options="vehicleTypeList"
+              :props="oneselfDefaultProps"
+              v-model="searchFrom.VEHICLE_TYPE"
+              placeholder="请选择车辆类型"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="违规类型" prop="VIOLATION_TYPE">
+            <SelectTree
+              ref="selectTree_Search2"
+              :clearable="false"
+              :options="violationTypeList"
+              :props="oneselfDefaultProps"
+              v-model="searchFrom.VIOLATION_TYPE"
+              placeholder="请选择违规类型"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label-width="10px">
+            <el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
+              搜索
+            </el-button>
+            <el-button v-waves type="success" icon="el-icon-refresh" @click="goKeyReset">
+              重置
+            </el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 分页列表 -->
+    <el-table
+      v-loading="listLoading"
+      ref="vehicleMessageTable"
+      :data="varList"
+      :row-key="getRowKey"
+      :header-cell-style="{
+        'font-weight': 'bold',
+        'color': '#000'
+      }"
+      tooltip-effect="dark"
+      border
+      fit
+      highlight-current-row>
+      <el-table-column
+        :reserve-selection="true"
+        type="selection"
+        width="55"
+        align="center"/>
+      <el-table-column type="index" label="序号" width="50" align="center" />
+      <el-table-column prop="CORPINFO_NAME" label="分公司名称" align="center" />
+      <el-table-column prop="LICENCE_NO" label="车牌号" align="center" />
+      <el-table-column label="车牌类型" align="center" width="120">
+        <template slot-scope="{row}">
+          {{ translateLicenceType(row.LICENCE_TYPE) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="车辆类型" align="center" width="120">
+        <template slot-scope="{row}">
+          {{ translateVehicleType(row.VEHICLE_TYPE) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="VEHICLE_DEPARTMENT_NAME" label="车辆所属部门" align="center" />
+      <el-table-column prop="USER_NAME" label="车辆责任人" align="center" width="120" />
+      <el-table-column prop="VIOLATION_COUNT" label="违规次数" align="center" />
+      <el-table-column prop="ISEXIST" label="是否存在" align="center" />
+
+      <el-table-column label="操作" align="center" width="480">
+        <template slot-scope="{row}">
+          <el-button icon="el-icon-view" size="mini" @click="showDetail(row.VEHICLE_ID)">查看违规记录</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="page-btn-group">
+      <div>
+        <el-button type="primary" icon="el-icon-plus" @click="openAddDialogAddBtn">新增</el-button>
+      </div>
+      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getPageList" />
+    </div>
+    <!--  添加车辆违规信息  -->
+    <el-dialog :visible.sync="addDialogVisible" title="添加车辆违规信息" width="600px">
+      <el-form v-if="addDialogVisible" ref="addForm" :rules="addFormRules" :model="addForm" label-width="170px" style="padding:0 20px; width: 500px;">
+        <el-form-item :rules="[{required: true}]" label="车牌号" label-width="110px">
+          <el-input v-model="addForm.LICENCE_NO" :autosize="{ minRows: 1}" type="text" maxlength="300" placeholder="这里输入车牌号..." @blur="goCheckLicenceNo()"/>
+        </el-form-item>
+        <!-- 白牌、蓝牌、黄牌、绿牌、黑牌 下拉框-->
+        <el-form-item :rules="[{required: true}]" label="车牌类型" label-width="110px" prop="LICENCE_TYPE">
+          <SelectTree
+            ref="selectTree_add2"
+            :clearable="false"
+            :options="licenceTypeList"
+            :props="oneselfDefaultProps"
+            v-model="addForm.LICENCE_TYPE"
+            placeholder="请选择车牌类型"
+            style="width: 300px"/>
+        </el-form-item>
+        <!-- 货车、轿车、大巴客车 下拉框-->
+        <el-form-item :rules="[{required: true}]" label="车辆类型" label-width="110px" prop="VEHICLE_TYPE">
+          <SelectTree
+            ref="selectTree_add3"
+            :clearable="false"
+            :options="vehicleTypeList"
+            :props="oneselfDefaultProps"
+            v-model="addForm.VEHICLE_TYPE"
+            placeholder="请选择车辆类型"
+            style="width: 300px"/>
+        </el-form-item>
+        <el-form-item :rules="[{required: true}]" label="违规时间" label-width="110px">
+          <el-date-picker id="VIOLATIONTIME" ref="VIOLATIONTIME" v-model="addForm.VIOLATIONTIME" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" style="width: 100%" type="datetime" placeholder="请选择" />
+        </el-form-item>
+        <!-- 违规类型：（0-未按规定车道行驶，1-违规停车） 下拉框-->
+        <el-form-item :rules="[{required: true}]" label="违规类型" label-width="110px" prop="VIOLATION_TYPE">
+          <SelectTree
+            ref="selectTree_add3"
+            :clearable="false"
+            :options="violationTypeList"
+            :props="oneselfDefaultProps"
+            v-model="addForm.VIOLATION_TYPE"
+            placeholder="请选择违规类型"
+            style="width: 300px"/>
+        </el-form-item>
+        <el-form-item :rules="[{required: true}]" label="违规区域" label-width="110px" prop="LOCATION">
+          <el-input :rows="3" v-model="addForm.LOCATION" type="textarea" placeholder="违规区域需明确车辆在港口内的具体违规位置如某一口门附近、某一码头区域、某一仓库通道等..."/>
+        </el-form-item>
+        <el-form-item :rules="[{required: true}]" label="违规图片" label-width="110px" prop="FFILE">
+          <el-upload
+            ref="violationImageUpload"
+            :class="{hide:violationUpload}"
+            :on-preview="handlePictureCardPreview"
+            :before-upload="beforeFileUpload"
+            :on-remove="handleRemove"
+            :on-change="handleChangeIMG"
+            :limit="4"
+            :auto-upload="false"
+            action="#"
+            accept=".jpg,.jpeg,.png"
+            class="avatar-uploader"
+            list-type="picture-card">
+            <i class="el-icon-plus" />
+          </el-upload>
+          <span class="red-tip">* 最多只能上传四张图片</span>
+          <el-dialog :visible.sync="dialogImageVisible">
+            <img :src="dialogImageUrl" width="100%" alt="">
+          </el-dialog>
+        </el-form-item>
+        <el-form-item label="违规说明" label-width="110px" prop="DESCRIBE_MESSAGE" >
+          <el-input :rows="3" v-model="addForm.DESCRIBE_MESSAGE" type="textarea" placeholder="请在此处输入违规说明..."/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addDialogCancelBtn">取 消</el-button>
+        <el-button type="primary" @click="addDialogConfirmBtn">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+import WriteSign from '@/components/WriteSign'
+import SelectTree from '@/components/SelectTree'
+import safetyFlowChart from '../../../hiddenUtil/safetyFlowChart'
+import { upload } from '@/utils/upload'
+export default {
+  components: { Pagination, WriteSign, safetyFlowChart, SelectTree },
+  directives: { waves },
+  data() {
+    return {
+      ISCHECK: false,
+      listLoading: true,
+      add: false,
+      del: false,
+      edit: false,
+      // 分页列表相关的三个属性
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      total: 0,
+      varList: [], // 列表数据
+      loginUserId: '', // 当前登陆用户的id
+      loginUserName: '', // 当前登陆用户的名称
+      loginUserCorpInfoId: '', // 当前登陆用户的分公司id
+      // 部门树的数据和默认属性
+      departmentTreeData: [],
+      defaultProps: {
+        value: 'id',
+        children: 'nodes',
+        label: 'name'
+      },
+      // 查询表单的数据
+      searchFrom: {
+        VEHICLE_ID: '', // 车辆ID(基础属性)
+        LICENCE_NO: '', // 车牌号
+        VEHICLE_TYPE: '', // 车辆类型
+        VIOLATION_TYPE: '' // 违规类型
+      },
+      // 添加表单的数据
+      addForm: {
+        LICENCE_NO: '', // 车牌号
+        LICENCE_TYPE: '', // 车牌类型
+        VEHICLE_TYPE: '', // 车辆类型
+        VIOLATION_TYPE: '', // 违规类型
+        LOCATION: '', // 违规区域
+        FFILE: [], // 违规图片
+        VIOLATIONTIME: '', // 违规时间
+        DESCRIBE_MESSAGE: '' // 违规说明
+      },
+      detailForm: {
+        LICENCE_NO: '', // 车牌号
+        LICENCE_TYPE: '', // 车牌类型
+        VEHICLE_TYPE: '', // 车辆类型
+        VIOLATION_TYPE: '', // 违规类型
+        LOCATION: '', // 违规区域
+        FFILE: [], // 违规图片
+        VIOLATIONTIME: '', // 违规时间
+        DESCRIBE_MESSAGE: '' // 违规说明
+      },
+      // 添加表单的验证规则
+      addFormRules: {
+        LICENCE_NO: [{ required: true, message: '车牌号不能为空', trigger: 'blur' }],
+        VIOLATION_TYPE: [{ required: true, message: '请选择违规类型', trigger: 'blur' }],
+        FFILE: [{ required: true, message: '违规图片不能为空', trigger: 'blur' }],
+        LICENCE_TYPE: [{ required: true, message: '请选择车牌类型', trigger: 'blur' }],
+        VEHICLE_TYPE: [{ required: true, message: '请选择车辆类型', trigger: 'blur' }]
+      },
+      // 违规类型列表
+      violationTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '未按规定车道行驶' },
+        { ID: '1', NAME: '违规停车' }
+      ],
+      // 车辆类型列表
+      vehicleTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '货车' },
+        { ID: '1', NAME: '轿车' },
+        { ID: '2', NAME: '大巴客车' }
+      ],
+      // 车牌类型列表
+      licenceTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '白牌' },
+        { ID: '1', NAME: '蓝牌' },
+        { ID: '2', NAME: '黄牌' },
+        { ID: '3', NAME: '绿牌' },
+        { ID: '4', NAME: '黑牌' }
+      ],
+      // 自定义的下拉树默认属性
+      oneselfDefaultProps: {
+        value: 'ID',
+        label: 'NAME',
+        children: 'nodes'
+      },
+      addDialogVisible: false,
+      violationUpload: false, // 违规照片
+      dialogImageVisible: false, // 放大照片的显示和隐藏
+      violation_files: [], // 违规照片
+      dialogImageUrl: '' // 照片的地址
+    }
+  },
+  created() {
+    this.getLoginUserInfo() // 获取当前登陆用户的信息
+    this.getDepartmentTreeData() // 获取部门树的数据
+    // this.getDict() // 获取字典
+    this.getPageList() // 获取分页列表要展示的数据
+  },
+  methods: {
+    // 获取并设置列表行的主键ID
+    getRowKey(row) {
+      return row.VEHICLE_ID
+    },
+    // 获取数据字典数据
+    // getDict: function() {
+    //   requestFN(
+    //     '/dictionaries/listSelectTree',
+    //     {
+    //       DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型
+    //     }
+    //   ).then((data) => {
+    //     this.inspectionTypeList = JSON.parse(data.zTreeNodes)
+    //   }).catch((e) => {
+    //
+    //   })
+    // },
+    // 获得部门树
+    getDepartmentTreeData() {
+      requestFN(
+        '/department/listTree',
+        {}
+      ).then((data) => {
+        this.departmentTreeData = JSON.parse(data.zTreeNodes)
+      }).catch((e) => {
+      })
+    },
+    getLoginUserInfo() { // 获取登录人信息
+      return new Promise((resolve) => {
+        requestFN(
+          '/user/goEditMyInfo',
+          {}
+        ).then((data) => {
+          this.loginUserId = data.pd.USER_ID
+          this.loginUserName = data.pd.NAME
+          this.loginUserCorpInfoId = data.pd.CORPINFO_ID
+          resolve('ok')
+        }).catch((e) => {
+
+        })
+      })
+    },
+    // 搜索按钮的点击事件
+    getQuery() {
+      this.$refs.vehicleMessageTable.clearSelection() // 先置空表格再查询
+      this.getPageList()
+    },
+    // 重置搜索表单按钮的点击事件
+    goKeyReset() {
+      this.resetSearch() // 重置搜索表单按钮的点击事件
+      this.getQuery() // 根据查询参数重新获取列表数据
+    },
+    // 表单控件的置空操作
+    resetSearch() {
+      this.searchFrom.LICENCE_NO = '' // 清空下拉框
+      this.$refs.selectTree_Search1.clearHandle() // 清空下拉树
+      this.$refs.selectTree_Search2.clearHandle()
+    },
+    // 获取分页列表的数据
+    getPageList() {
+      this.listLoading = true
+      requestFN(
+        'breakRulesRecord/getPageList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          ...this.searchFrom
+          // CORPINFO_ID: this.loginUserCorpInfoId !== '' ? this.loginUserCorpInfoId : this.$parent.CORPINFO_ID
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.varList
+        this.total = data.page.totalResult
+        // this.hasButton()
+        this.pd = data.pd
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    // 打开新增弹窗的新增按钮
+    openAddDialogAddBtn() {
+      this.addDialogVisible = true
+      this.reSetAddDialog()
+    },
+    // 添加弹窗的取消按钮
+    addDialogCancelBtn() {
+      this.addDialogVisible = false
+    },
+    reSetAddDialog() {
+      this.addForm.LICENCE_NO = ''
+      this.addForm.VIOLATION_TYPE = ''
+      this.addForm.LOCATION = ''
+      this.addForm.FFILE = ''
+      this.addForm.VIOLATIONTIME = ''
+      this.addForm.DESCRIBE_MESSAGE = ''
+      this.addForm.LICENCE_TYPE = '' // 车牌类型
+      this.addForm.VEHICLE_TYPE = '' // 车辆类型
+      this.violation_files = [] // 违规图片
+    },
+    // 图片上传相关的函数
+    handleRemove(file, fileList) {
+      this.violationUpload = fileList.length >= 4
+    },
+    handleChangeIMG(file, fileList) {
+      const types = ['image/jpeg', 'image/jpg', 'image/png']
+      const isImage = types.includes(file.raw.type)
+      if (!isImage) {
+        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
+        fileList.pop()
+      }
+      this.violationUpload = fileList.length >= 4
+    },
+    // 点击放大图片
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogImageVisible = true
+    },
+    beforeFileUpload(file) {
+      const types = ['image/jpeg', 'image/jpg', 'image/png']
+      const isImage = types.includes(file.type)
+      if (!isImage) {
+        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
+        return false
+      } else {
+        this.violation_files.push(file) // 将多个图片放到一个数组中
+        // this.addForm.FFILE = file // 将单个图片放到一个变量中
+      }
+    },
+    // 添加弹窗的确定按钮
+    addDialogConfirmBtn() {
+      if (this.addForm.LICENCE_NO !== null && this.addForm.LICENCE_NO === '') {
+        this.$message({
+          message: '车牌号不能为空',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.LICENCE_TYPE !== null && this.addForm.LICENCE_TYPE === '') {
+        this.$message({
+          message: '请选择车牌类型',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.VEHICLE_TYPE !== null && this.addForm.VEHICLE_TYPE === '') {
+        this.$message({
+          message: '请选择车辆类型',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.VIOLATIONTIME !== null && this.addForm.VIOLATIONTIME === '') {
+        this.$message({
+          message: '请选择违规时间',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.VIOLATION_TYPE !== null && this.addForm.VIOLATION_TYPE === '') {
+        this.$message({
+          message: '请选择违规类型',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.LOCATION !== null && this.addForm.LOCATION === '') {
+        this.$message({
+          message: '请填写违规区域',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.$refs.violationImageUpload.uploadFiles.length < 1) {
+        this.$message({
+          message: '请上传违规图片',
+          type: 'error'
+        })
+        this.loading = false
+        return false
+      }
+      this.$refs.addForm.validate(valid => {
+        this.addRequest(valid) // 同时保存多张图片
+      })
+    },
+    addRequest(valid) {
+      requestFN(
+        'breakRulesRecord/addRecord',
+        {
+          ...this.addForm
+          // CORPINFO_ID: this.loginUserCorpInfoId
+        }
+      ).then((data) => {
+        if (data.result === 'fail') {
+          this.$message({
+            message: data.msg,
+            type: 'error'
+          })
+        } else {
+          this.saveViolationRecordImg(data.VIOLATION_ID) // 保存违规记录图片
+          this.$message.success('违规记录添加成功')
+          this.getPageList() // 重新加载列表
+          this.addDialogVisible = false
+        }
+      }).catch((e) => {
+      })
+    },
+    // 保存违规记录图片
+    saveViolationRecordImg(VIOLATION_ID) {
+      var _this = this
+      const loading = this.$loading({
+        lock: true,
+        text: '加载中......',
+        background: 'rgba(0,0,0,0.5)'
+      })
+      this.$refs.violationImageUpload.submit()
+      const todata = new FormData()
+      // 将多个图片放到了一个数组violation_files中
+      for (var i = 0; i < _this.violation_files.length; i++) {
+        if (_this.violation_files[i]) {
+          todata.append('FFILE', _this.violation_files[i])
+        }
+      }
+      if (!todata.get('FFILE')) {
+        return
+      }
+      todata.append('FOREIGN_KEY', VIOLATION_ID)
+      todata.append('TYPE', 301) // 车辆违规记录
+      upload(
+        '/imgfiles/add',
+        todata
+      ).then((data) => {
+        loading.close()
+        if (data.result == 'success') {
+          this.$message({
+            message: '违规记录图片上传成功',
+            type: 'success'
+          })
+        } else {
+          this.$message({
+            message: '违规记录图片上传失败',
+            type: 'error'
+          })
+          this.loading = false
+        }
+      }).catch((e) => {
+        this.listLoading = false
+        this.loading = false
+      })
+    },
+    translateLicenceType(id) {
+      for (var i = 0; i < this.licenceTypeList.length; i++) {
+        if (this.licenceTypeList[i].ID == id) return this.licenceTypeList[i].NAME
+      }
+    },
+    translateVehicleType(id) {
+      for (var i = 0; i < this.vehicleTypeList.length; i++) {
+        if (this.vehicleTypeList[i].ID == id) return this.vehicleTypeList[i].NAME
+      }
+    },
+    showDetail(VEHICLE_ID) {
+      this.$parent.VEHICLE_ID = VEHICLE_ID
+      this.$parent.activeName = 'Info'
+    },
+    // 检查车牌号是否规范
+    goCheckLicenceNo() {
+      if (this.addForm.LICENCE_NO === '') {
+        this.$message.success('请输入车牌号')
+        this.ISCHECK = false
+      } else {
+        const regex = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/
+        const result = regex.test(this.addForm.LICENCE_NO)
+        if (result) {
+          this.$message.success('验证通过')
+          this.ISCHECK = true
+        } else {
+          this.$message.success('车牌号不规范')
+          this.ISCHECK = false
+        }
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/src/views/vehiclebreakrules/records/index.vue b/src/views/vehiclebreakrules/records/index.vue
new file mode 100644
index 0000000..ef0d244
--- /dev/null
+++ b/src/views/vehiclebreakrules/records/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <List v-show="activeName==='List'" ref="list" />
+    <Info v-if="activeName==='Info'" />
+  </div>
+</template>
+
+<script>
+import List from './components/list'
+import Info from './components/info'
+export default {
+  components: {
+    List,
+    Info
+  },
+  data() {
+    return {
+      activeName: 'List',
+      VEHICLE_ID: '', // 车辆id
+      CORPINFO_ID: '' // 企业id
+    }
+  },
+  watch: {
+    activeName(newValue, oldValue) {
+      if (newValue == 'List') {
+        this.$refs.list.getQuery()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>