Merge branch 'liujun-25-相关方企业新增属性' into pet

2、口门门禁管理系统--->车辆违规管理模块--->添加车辆违规记录管理的增删改查
3、口门门禁管理系统--->车辆违规管理模块--->添加黑名单管理的增删改查

src/components/KeyProjectHidden/index.vue

@@ -37,7 +37,7 @@
         </tr>
         <tr>
           <td class="tbg">发现时间</td>
-          <td>{{ formatDate(pd.CREATTIME,'yyyy-MM-DD HH:mm') }}</td>
+          <td>{{ pd.CREATTIME }}</td>
         </tr>
         <tr>
           <td class="tbg">整改期限</td>

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>

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 != '') {
           // 将字符串转换成数组，此时是字符串数组

src/views/gatemachine/second/dockdevice/components/detail.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="app-container">
+    <div class="level-title">
+      <h1>详情</h1>
+    </div>
+    <div>
+      <el-form v-loading="formLoading" ref="form" :model="form" label-width="150px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="设备名称：" prop="DEVICE_NAME">
+              <el-input v-model="form.DEVICE_NAME" disabled/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="设备类型：" prop="DEVICE_TYPE_DESC">
+              <el-input v-model="form.DEVICE_TYPE_DESC" disabled/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="所属口门名称：" prop="DOOR_NAME">
+              <el-input v-model="form.DOOR_NAME" disabled/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="所属通道名称：" prop="PATH_NAME">
+              <el-input v-model="form.PATH_NAME" disabled/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="口门级别：" prop="AREA_LEVEL_DESC">
+              <el-input v-model="form.AREA_LEVEL_DESC" disabled/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="ui-foot">
+      <el-button plain type="info" @click="goBack">返 回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import SelectTree from '@/components/SelectTree'
+import waves from '@/directive/waves'
+
+export default {
+
+  components: { Pagination, SelectTree },
+  directives: { waves },
+  data() {
+    return {
+      formLoading: false,
+      form: {
+        DEVICE_NAME: '', // 设备名称
+        DEVICE_TYPE_DESC: '', // 设备类型
+        DOOR_NAME: '', // 口门名称
+        PATH_NAME: '', // 通道名称
+        AREA_LEVEL_DESC: '' // 口门级别
+      }
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.handleDetail(this.$parent.DOCK_DEVICE_ID)
+  },
+  methods: {
+    handleDetail(DOCK_DEVICE_ID) {
+      this.formLoading = true
+      requestFN(
+        '/dockDevice/findById',
+        {
+          'DOCK_DEVICE_ID': DOCK_DEVICE_ID
+        }
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.form.DEVICE_NAME = data.pd.DEVICE_NAME // 设备名称
+          this.form.DEVICE_TYPE_DESC = data.pd.DEVICE_TYPE_DESC // 设备类型
+          this.form.DOOR_NAME = data.pd.DOOR_NAME // 口门名称
+          this.form.PATH_NAME = data.pd.PATH_NAME // 通道名称
+          this.form.AREA_LEVEL_DESC = data.pd.AREA_LEVEL_DESC // 口门级别
+        } else {
+          this.$message({
+            message: '系统忙，请稍后重试',
+            type: 'error'
+          })
+        }
+        this.formLoading = false
+      }).catch((e) => {
+        this.formLoading = false
+      })
+    },
+    // 返回列表
+    goBack() {
+      this.$parent.activeName = 'List'
+    }
+  }
+}
+</script>
+<style>
+</style>

src/views/gatemachine/second/dockdevice/components/edit.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="app-container">
+    <div class="level-title">
+      <h1>{{ this.$parent.DOCK_DEVICE_ID == '' ? "新增" : "修改" }}</h1>
+    </div>
+    <div>
+      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="设备名称：" prop="DEVICEINDEXCODE">
+              <el-select v-model="form.DEVICEINDEXCODE" style="width: 100%;" @change="handleDeviceNameChange">
+                <el-option v-for="item in deviceList" :key="item.DEVICE_ID" :label="item.DEVICE_NAME" :value="item.DEVICE_ID" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="设备类型：" prop="DEVICE_TYPE">
+              <el-select v-model="form.DEVICE_TYPE" style="width: 100%;">
+                <el-option v-for="item in deviceTypeList" :key="item.VALUE" :label="item.NAME" :value="item.VALUE" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 查看展示所有二级口门（查询条件：口门类型，口门级别） -->
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="所属口门名称：" prop="DOORINDEXCODE">
+              <el-select v-model="form.DOORINDEXCODE" style="width: 100%;" @change="handleDoorNameChange">
+                <el-option v-for="item in doorList" :key="item.DOOR_ID" :label="item.DOOR_NAME" :value="item.DOOR_ID" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 查询条件：口门名称、通道类型 -->
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="所属通道名称：" prop="PATHINDEXCODE">
+              <el-select v-model="form.PATHINDEXCODE" style="width: 100%;" @change="handlePathNameChange">
+                <el-option v-for="item in pathList" :key="item.PATH_ID" :label="item.PATH_NAME" :value="item.PATH_ID" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="ui-foot">
+      <el-button type="success" @click="confirm">保 存</el-button>
+      <el-button plain type="info" @click="goBack">返 回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import SelectTree from '@/components/SelectTree'
+import waves from '@/directive/waves'
+
+export default {
+
+  components: { Pagination, SelectTree },
+  directives: { waves },
+  data() {
+    return {
+      deviceList: [], // 设备列表
+      doorList: [], // 口门列表
+      pathList: [], // 通道列表
+      form: {
+        DEVICEINDEXCODE: '', // 设备id
+        DEVICE_TYPE: '', // 设备类型
+        DOORINDEXCODE: '', // 口门id
+        PATHINDEXCODE: '', // 通道id
+        DEVICE_NAME: '', // 设备名称
+        DOOR_NAME: '', // 口门名称
+        PATH_NAME: '', // 通道名称
+        AREA_LEVEL: 2 // 口门级别:默认是二级口门
+      },
+      rules: {
+        DEVICEINDEXCODE: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
+        DEVICE_TYPE: [{ required: true, message: '请选择设备类型', trigger: 'blur' }],
+        DOORINDEXCODE: [{ required: true, message: '请选择所属口门名称', trigger: 'blur' }],
+        PATHINDEXCODE: [{ required: true, message: '请选择所属通道名称', trigger: 'blur' }]
+      },
+      deviceTypeList: [ // 设备类型
+        { NAME: '人', VALUE: 0 },
+        { NAME: '车', VALUE: 1 }
+      ],
+      DOCK_DEVICE_ID: ''
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.reSetForm()
+    this.DOCK_DEVICE_ID = this.$parent.DOCK_DEVICE_ID
+    this.handleDeviceList()
+    this.handleDoorList()
+    this.handlePathList()
+    if (this.DOCK_DEVICE_ID !== '') {
+      this.getDataByID()
+    }
+  },
+  methods: {
+    confirm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          if (this.DOCK_DEVICE_ID === '') {
+            this.handleAdd()
+          } else {
+            this.handleEdit()
+          }
+        }
+      })
+    },
+    reSetForm() {
+      this.form.DEVICEINDEXCODE = ''
+      this.form.DEVICE_TYPE = ''
+      this.form.DOORINDEXCODE = ''
+      this.form.PATHINDEXCODE = ''
+      this.form.DEVICE_NAME = ''
+      this.form.DOOR_NAME = ''
+      this.form.DOOR_NAME = ''
+    },
+    handleEdit() {
+      this.listLoading = true
+      requestFN(
+        '/dockDevice/edit',
+        {
+          DOCK_DEVICE_ID: this.DOCK_DEVICE_ID,
+          ...this.form
+        }
+      ).then((data) => {
+        this.goBack()
+        this.listLoading = false
+        this.dialogFormEdit = false
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    handleAdd() {
+      requestFN(
+        '/dockDevice/add',
+        this.form
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.goBack()
+        }
+      }).catch((e) => {
+      })
+    },
+    // 进入修改界面进行数据回显
+    getDataByID() {
+      this.listLoading = true
+      this.dialogFormVisible = true
+      requestFN(
+        '/dockDevice/findById',
+        { DOCK_DEVICE_ID: this.DOCK_DEVICE_ID }
+      ).then((data) => {
+        if (this.safeReturn(data.pd.DEVICEINDEXCODE) !== '') {
+          this.form.DEVICEINDEXCODE = data.pd.DEVICEINDEXCODE // 设备id
+        }
+        this.form.DEVICE_NAME = data.pd.DEVICE_NAME // 设备名称
+        this.form.DEVICE_TYPE = Number(data.pd.DEVICE_TYPE) // 设备类型
+        if (this.safeReturn(data.pd.DOORINDEXCODE) !== '') {
+          this.form.DOORINDEXCODE = data.pd.DOORINDEXCODE // 口门id
+        }
+        this.form.DOOR_NAME = data.pd.DOOR_NAME
+        if (this.safeReturn(data.pd.PATHINDEXCODE) !== '') {
+          this.form.PATHINDEXCODE = data.pd.PATHINDEXCODE // 通道id
+        }
+        this.form.PATH_NAME = data.pd.PATH_NAME // 通道名称
+        this.form.AREA_LEVEL = data.pd.AREA_LEVEL // 口门级别
+        this.dialogFormVisible = false
+      }).catch((e) => {
+        this.dialogFormVisible = false
+        this.listLoading = false
+      })
+    },
+  safeReturn(value) {
+    if (value !== null && value !== undefined && value !== '') {
+      return value;
+    }
+    return '';
+  },
+// 返回列表
+    goBack() {
+      this.$parent.activeName = 'List'
+    },
+    handleDeviceList() { // 获取设备列表
+      this.formLoading = true
+      requestFN(
+        '/dockDevice/goDeviceList'
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.deviceList = data.varList
+        } else {
+          this.$message({
+            message: '系统忙，请稍后重试',
+            type: 'error'
+          })
+        }
+        this.formLoading = false
+      }).catch((e) => {
+        this.formLoading = false
+      })
+    },
+    handleDoorList(value) { // 获取口门列表(默认获取二级口门)
+      this.formLoading = true
+      requestFN(
+        '/dockDevice/goDoorList',
+        {
+          'DOOR_TYPE': '',
+          'AREA_LEVEL': 2
+        }
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.doorList = data.varList
+        } else {
+          this.$message({
+            message: '系统忙，请稍后重试',
+            type: 'error'
+          })
+        }
+        this.formLoading = false
+      }).catch((e) => {
+        this.formLoading = false
+      })
+    },
+    handlePathList() { // 获取通道列表
+      this.formLoading = true
+      requestFN(
+        '/dockDevice/goPathList',
+        {'PATH_TYPE': ''}
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.pathList = data.varList
+        } else {
+          this.$message({
+            message: '系统忙，请稍后重试',
+            type: 'error'
+          })
+        }
+        this.formLoading = false
+      }).catch((e) => {
+        this.formLoading = false
+      })
+    },
+    handleDeviceNameChange(value) { // 获取设备名称
+      const selectedDevice = this.deviceList.find(device => device.DEVICE_ID === value)
+      if (selectedDevice) {
+        this.form.DEVICE_NAME = selectedDevice.DEVICE_NAME
+      } else {
+        this.form.DEVICE_NAME = ''
+      }
+    },
+    handleDoorNameChange(value) { // 获取口门名称
+      const selectedDoor = this.doorList.find(door => door.DOOR_ID === value)
+      if (selectedDoor) {
+        this.form.DOOR_NAME = selectedDoor.DOOR_NAME
+      } else {
+        this.form.DOOR_NAME = ''
+      }
+    },
+    handlePathNameChange(value) { // 获取通道名称
+      const selectedPath = this.pathList.find(path => path.PATH_ID === value)
+      if (selectedPath) {
+        this.form.PATH_NAME = selectedPath.PATH_NAME
+      } else {
+        this.form.PATH_NAME = ''
+      }
+    },
+  }
+}
+</script>
+<style>
+</style>

src/views/gatemachine/second/dockdevice/components/list.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="app-container">
+    <div class="rightCont">
+      <el-form label-width="50px">
+        <el-row>
+          <el-col :span="4">
+            <el-form-item label="设备名称" label-width="110px">
+              <el-input v-model="KEYWORDS" placeholder="请输入关键字"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4"/>
+          <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>
+      <div>
+        <el-table
+          v-loading="listLoading"
+          ref="multipleTable"
+          :data="varList"
+          :row-key="getRowKey"
+          border
+          tooltip-effect="dark"
+          style="width: 100%">
+          <!--          <el-table-column :selectable="selectable" type="selection" reserve-selection width="55" align="center"/>-->
+          <el-table-column type="index" label="序号" width="55" align="center"/>
+          <el-table-column prop="DEVICE_NAME" label="设备名称" align="center"/>
+          <el-table-column prop="DEVICE_TYPE_DESC" label="设备类型" align="center"/>
+          <el-table-column prop="DOOR_NAME" label="所属口门名称" align="center"/>
+          <el-table-column prop="PATH_NAME" label="所属通道名称" align="center"/>
+          <el-table-column prop="AREA_LEVEL_DESC" label="口门级别" align="center"/>
+          <el-table-column label="操作" width="350" align="center">
+            <template slot-scope="{row}">
+              <el-button
+                type="success"
+                icon="el-icon-edit"
+                size="mini"
+                @click="handleDetail(row)">查看
+              </el-button>
+              <el-button
+                type="primary"
+                icon="el-icon-edit"
+                size="mini"
+                @click="handleEdit(row.DOCK_DEVICE_ID)">修改
+              </el-button>
+              <el-button
+                v-if="del"
+                type="danger"
+                icon="el-icon-delete"
+                size="mini"
+                @click="handleDelete(row)">删除
+              </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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import { requestFN } from '@/utils/request'
+
+import waves from '@/directive/waves' // waves directive
+import SelectTree from '@/components/SelectTree'
+
+export default {
+
+  components: { Pagination, SelectTree },
+
+  directives: { waves },
+  data() {
+    return {
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      total: 0,
+      add: false,
+      del: false,
+      edit: false,
+      toExcel: false,
+      KEYWORDS: '',
+      varList: [],
+      AREA_LEAVE: '1',
+      DOCK_DEVICE_ID: '',
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.getList()
+    this.hasButton()
+  },
+  methods: {
+    getRowKey(row) {
+      return row.DOCK_DEVICE_ID
+    },
+    // 添加
+    handleAdd() {
+      this.$parent.activeName = 'Edit'
+      this.$parent.DOCK_DEVICE_ID = ''
+      this.DOCK_DEVICE_ID = ''
+    },
+    // 搜索
+    getQuery() {
+      this.$refs.multipleTable.clearSelection()
+      this.getList()
+    },
+    // 获取列表
+    getList() {
+      this.listLoading = true
+      this.varList = []
+      requestFN(
+        '/dockDevice/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          KEYWORDS: this.KEYWORDS,
+          AREA_LEVEL: '2'
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.varList
+        this.total = data.page.totalResult
+        this.hasButton()
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    goKeyReset() {
+      this.KEYWORDS = ''
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$parent.DOCK_DEVICE_ID = row.DOCK_DEVICE_ID
+      this.$parent.activeName = 'Detail'
+      this.DOCK_DEVICE_ID = row.DOCK_DEVICE_ID
+    },
+    handleEdit(DOCK_DEVICE_ID) {
+      this.$parent.DOCK_DEVICE_ID = DOCK_DEVICE_ID
+      this.$parent.activeName = 'Edit'
+      this.DOCK_DEVICE_ID = DOCK_DEVICE_ID
+    },
+    handleDelete(row) {
+      this.$confirm('确定要删除[' + row.DEVICE_NAME + ']吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/dockDevice/delete',
+          {
+            DOCK_DEVICE_ID: row.DOCK_DEVICE_ID
+          }
+        ).then(() => {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+          this.listLoading = false
+          this.varList = []
+          this.listQuery.page = 1
+          this.getList()
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    hasButton: function() {
+      var keys = 'dockDevice:add,dockDevice:del,dockDevice:edit,toExcel'
+      requestFN(
+        '/head/hasButton',
+        {
+          keys: keys
+        }
+      ).then((data) => {
+        this.add = data.mkmjDoorfhadminadd		// 新增权限
+        this.del = data.mkmjDoorfhadmindel		// 删除权限
+        this.edit = data.mkmjDoorfhadminedit	// 修改权限
+        this.toExcel = data.toExcel // 导出到excel权限
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.returnBtn {
+  float: right;
+}
+
+.app-container {
+  display: flex; /**/
+  align-items: baseline;
+}
+
+.rightCont {
+  width: 100%
+}
+</style>

src/views/gatemachine/second/dockdevice/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <List v-if="activeName=='List'" ref="list" />
+    <Edit v-if="activeName=='Edit'" />
+    <Detail v-if="activeName=='Detail'"/>
+  </div>
+</template>
+
+<script>
+import List from './components/list'
+import Edit from './components/edit'
+import Detail from './components/detail'
+
+export default {
+  components: {
+    List: List,
+    Edit: Edit,
+    Detail: Detail
+  },
+  data() {
+    return {
+      activeName: 'List',
+      DOCK_DEVICE_ID: ''
+    }
+  },
+  watch: {}
+}
+</script>
+
+<style scoped>
+</style>
+

src/views/gatemachine/second/gateDoor/components/edit.vue

@@ -74,12 +74,15 @@
 
 <script>
 import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import DragEntity from '../../../../map/js/dragentity'
+import RyDragEntity from '../../../../map/js/ry_dragentity.js'
 import { requestFN } from '@/utils/request'
 import SelectTree from '@/components/SelectTree'
 import waves from '@/directive/waves'
 import TiandiMap from '../../../../../components/TianMap/TiandiMap'
-
 let viewer = null
+let drag = null
+let ry_drag = null
 const Cesium = window.Cesium
 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4'
 var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
@@ -131,7 +134,16 @@ export default {
         { NAME: '正常', VALUE: 0 },
         { NAME: '停用', VALUE: 1 },
         { NAME: '暂时关闭', VALUE: 2 }
-      ]
+      ],
+      map: null,
+      corpInfo: {
+        CORP_INFO_ID: '21590a00ea5e462e9ee44dd332dddc26',
+        longitude: '119.65009974259941',
+        latitude: '39.93517744811151'
+      },
+      center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
+      LONGTITUDE :'',
+      LATITUDE : ''
     }
   },
   watch: {
@@ -152,112 +164,6 @@ export default {
       this.form.LONGITUDEANDLATITUDE = this.form.LATITUDE + '--' + this.form.LONGITUDE
       this.dialogFormMap = false
     },
-    /**
-     * 初始化天地图对象
-     */
-    /*    initTDT() {
-      return new Promise((resolve, reject) => {
-        if (window.T) {
-          console.log('天地图初始化成功...')
-          resolve(window.T)
-          reject('error')
-        }
-      }).then(T => {
-        window.T = T
-      })
-    },*/
-    /**
-     * 初始化地图
-     * @param {*} lng 经度
-     * @param {*} lat 纬度
-     * @param {*} zoom 缩放比例(1~18)
-     */
-    initMap(lng, lat, zoom) {
-      viewer = new Cesium.Viewer('cesiumContainer', {
-        // terrainProvider: Cesium.createWorldTerrain()
-        animation: false, // 动画
-        homeButton: true, // home键
-        geocoder: true, // 地址编码
-        baseLayerPicker: false, // 图层选择控件
-        timeline: false, // 时间轴
-        fullscreenButton: true, // 全屏显示
-        infoBox: true, // 点击要素之后浮窗
-        sceneModePicker: true, // 投影方式  三维/二维
-        navigationInstructionsInitiallyVisible: false, // 导航指令
-        navigationHelpButton: false, // 帮助信息
-        selectionIndicator: false, // 选择
-        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
-          // 影像底图
-          url: 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + tiandituTk,
-          subdomains: subdomains,
-          layer: 'tdtImgLayer',
-          style: 'default',
-          format: 'image/jpeg',
-          tileMatrixSetID: 'GoogleMapsCompatible', // 使用谷歌的瓦片切片方式
-          show: true
-        })
-      })
-      viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion
-      Cesium.ExperimentalFeatures.enableModelExperimental = true
-      var tile3d = new Cesium.Cesium3DTileset({
-        url: config.mapJsonUrl
-      })
-      viewer.scene.primitives.add(tile3d)
-
-      this.toCenter(lng, lat, zoom)
-      this.leftDownAction()
-    },
-    toCenter(LONGITUDE, LATITUDE, height) {
-      if (!LONGITUDE && !LATITUDE) {
-        viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(119.58, 39.94, height)
-        })
-        viewer.entities.removeAll()
-      } else {
-        viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(LONGITUDE, LATITUDE, height)
-        })
-        viewer.entities.removeAll()
-        this.form.LONGITUDE = LONGITUDE
-        this.form.LATITUDE = LATITUDE
-        this.addPoint([LONGITUDE, LATITUDE], 'init')
-      }
-    },
-    leftDownAction() {
-      // 去掉entity的点击事件 start
-      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
-      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
-      // 去掉entity的点击事件 end
-
-      const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
-      handler.setInputAction(event => {
-        viewer.entities.removeAll()
-        const clickPosition = viewer.scene.camera.pickEllipsoid(event.position) // 转经纬度（弧度）坐标
-        const radiansPos = Cesium.Cartographic.fromCartesian(clickPosition) // 转角度
-        this.form.LONGITUDE = Cesium.Math.toDegrees(radiansPos.longitude)
-        this.form.LATITUDE = Cesium.Math.toDegrees(radiansPos.latitude)
-        this.addPoint(clickPosition, 'click')
-      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-    },
-    addPoint(position, type) {
-      viewer.entities.add({ position: type === 'init' ? Cesium.Cartesian3.fromDegrees(...position) : position, billboard: {
-        image: img_h,
-        height: 25,
-        width: 23,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }})
-    },
-    handleMap() {
-      this.dialogFormMap = true
-      this.$nextTick(() => {
-        if (!viewer) this.initMap(this.form.LONGITUDE, this.form.LATITUDE, 5000)
-        else this.toCenter(this.form.LONGITUDE, this.form.LATITUDE, 5000)
-        /* else this.initCenter(this.form.LONGITUDE, this.form.LATITUDE, 16)*/
-      })
-    },
     confirm() {
       this.$refs.form.validate(valid => {
         if (valid) {
@@ -323,6 +229,273 @@ export default {
     // 返回列表
     goBack() {
       this.$parent.activeName = 'List'
+    },
+    handleMap(){
+      this.dialogFormMap = true
+      this.$nextTick(() => {
+        if (!this.map) {
+          // this.initMap(this.LONGTITUDE, this.LATITUDE, 16)
+          this.initMap2()
+        } else {
+          this.initCenter(this.LONGTITUDE, this.LATITUDE, 16)
+        }
+      })
+    },
+    initMap2() {
+      console.info(viewer)
+      if (this.dichitype === 2) {
+        return
+      }
+      viewer = new Cesium.Viewer('cesiumContainer', {
+        animation: false, // 动画
+        homeButton: true, // home键
+        geocoder: true, // 地址编码
+        baseLayerPicker: false, // 图层选择控件
+        timeline: false, // 时间轴
+        fullscreenButton: true, // 全屏显示
+        infoBox: true, // 点击要素之后浮窗
+        sceneModePicker: true, // 投影方式  三维/二维
+        navigationInstructionsInitiallyVisible: false, // 导航指令
+        navigationHelpButton: false, // 帮助信息
+        selectionIndicator: false, // 选择
+        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
+          // 影像底图
+          url: 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + tiandituTk,
+          subdomains: subdomains,
+          layer: 'tdtImgLayer',
+          style: 'default',
+          format: 'image/jpeg',
+          tileMatrixSetID: 'GoogleMapsCompatible', // 使用谷歌的瓦片切片方式
+          show: true
+        })
+      })
+      viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion
+      viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
+        // 影像注记
+        url: 'http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' + tiandituTk,
+        subdomains: subdomains,
+        layer: 'tdtCiaLayer',
+        style: 'default',
+        format: 'image/jpeg',
+        tileMatrixSetID: 'GoogleMapsCompatible',
+        show: true
+      }))
+      drag = new DragEntity({
+        viewer
+      })
+      // 根据不同的公司将信息加载到地图上
+      this.initInfo()
+      this.leftDownAction()
+      console.log(this.LATITUDE)
+      if (this.LATITUDE) {
+        console.log('LATITUDE')
+        this.dfdfd(this.LONGTITUDE, this.LATITUDE)
+      }
+
+      this.loadTilesetHandler()
+      ry_drag = new RyDragEntity({
+        viewer
+      })
+      this.dichitype = 2
+    },
+    initInfo() {
+      this.bottomOptionsIndex = ''
+      this.clickPort({
+        id: '00003',
+        CORP_INFO_ID: this.corpInfo.CORP_INFO_ID,
+        longitude: this.corpInfo.longitude,
+        latitude: this.corpInfo.latitude,
+        height: '2000'
+      })
+    },
+    clickPort({ id, longitude, latitude, height, CORP_INFO_ID }) {
+      console.log('clickPort', id, longitude, latitude, height, CORP_INFO_ID)
+      this.gangkouActive = id
+      this.CORP_INFO_ID = CORP_INFO_ID
+      this.componentKey = Math.random()
+      this.bottomOptionsKey = Math.random()
+      this.bottomOptionsAnimationComplex = false
+      this.toCenter({ longitude, latitude, height })
+      drag.addPolygon(id)
+      viewer.dataSources.removeAll()
+    },
+    toCenter(center = this.center) {
+      console.log('toCenter', center)
+      if (this.FIRE_POINT_ID && this.LONGTITUDE && this.LATITUDE && this.LONGTITUDE.trim() != '' && this.LATITUDE.trim() != '') {
+        this.center.longitude = this.LONGTITUDE
+        this.center.latitude = this.LATITUDE
+      } else {
+        this.center.longitude = center.longitude
+        this.center.latitude = center.latitude
+      }
+      this.center.height = center.height
+      viewer.camera.flyTo({
+        // 设置中心点,x,y,缩放等级
+        destination: Cesium.Cartesian3.fromDegrees(this.center.longitude, this.center.latitude, this.center.height)
+      })
+    },
+    leftDownAction() {
+      // 去掉entity的点击事件 start
+      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
+      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+      // 去掉entity的点击事件 end
+      this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+      this.handler.setInputAction(movement => {
+        // eslint-disable-next-line no-unused-vars
+        var cartesian = this.getCatesian3FromPX(movement.position)
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    },
+    getCatesian3FromPX: function(px) {
+      if (viewer && px) {
+        var picks = viewer.scene.drillPick(px)
+        var cartesian = null
+        // eslint-disable-next-line one-var
+        var isOn3dtiles = false,
+          isOnTerrain = false
+        // drillPick
+        for (const i in picks) {
+          const pick = picks[i]
+
+          if (
+            (pick && pick.primitive instanceof Cesium.Cesium3DTileFeature) ||
+            (pick && pick.primitive instanceof Cesium.Cesium3DTileset) ||
+            (pick && pick.primitive instanceof Cesium.Model)
+          ) {
+            // 模型上拾取
+            isOn3dtiles = true
+          }
+          // 3dtilset
+          if (isOn3dtiles) {
+            viewer.scene.pick(px) // pick
+            cartesian = viewer.scene.pickPosition(px)
+            if (cartesian) {
+              const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+              if (cartographic.height < 0) cartographic.height = 0
+              // eslint-disable-next-line prefer-const,one-var
+              let lon = Cesium.Math.toDegrees(cartographic.longitude),
+                // eslint-disable-next-line prefer-const
+                lat = Cesium.Math.toDegrees(cartographic.latitude),
+                // eslint-disable-next-line prefer-const
+                height = cartographic.height
+              cartesian = this.transformWGS84ToCartesian({
+                lng: lon,
+                lat: lat,
+                alt: height
+              })
+            }
+          }
+        }
+        // 地形
+        const boolTerrain =
+          viewer.terrainProvider instanceof
+          Cesium.EllipsoidTerrainProvider
+        // Terrain
+        if (!isOn3dtiles && !boolTerrain) {
+          var ray = viewer.scene.camera.getPickRay(px)
+          if (!ray) return null
+          cartesian = viewer.scene.globe.pick(ray, viewer.scene)
+          isOnTerrain = true
+        }
+        // 地球
+        if (!isOn3dtiles && !isOnTerrain && boolTerrain) {
+          cartesian = viewer.scene.camera.pickEllipsoid(
+            px,
+            viewer.scene.globe.ellipsoid
+          )
+        }
+        const cartesian1 = new Cesium.Cartesian3(cartesian.x, cartesian.y, cartesian.z) // 替换为实际的 Cartesian3 坐标值
+
+        // 将 Cartesian3 坐标转换为 Cartographic 坐标
+        const cartographic = Cesium.Cartographic.fromCartesian(cartesian1)
+
+        // 将 Cartographic 坐标转换为 CGCS2000 计算经纬度
+        const lng = Cesium.Math.toDegrees(cartographic.longitude)
+        const lat = Cesium.Math.toDegrees(cartographic.latitude)
+        const height = cartographic.height // 高度
+        this.LONGTITUDE = lng
+        this.LATITUDE = lat
+        this.dfdfd(lng, lat)
+        return `CGCS2000 坐标: 经度 ${lng}, 纬度 ${lat}, 高度 ${height}`
+      }
+    },
+    dfdfd(LONGITUDE, LATITUDE) {
+      let dianweiName = '口门点位'
+      if (this.form.FIRE_POINT_NAME) {
+        dianweiName = this.form.FIRE_POINT_NAME
+      }
+      var initPoint = [
+        {
+          'id': '00002',
+          'data_id': '00002',
+          'MAP_POINT_NAME': dianweiName,
+          'name': '',
+          'point_type': '港口',
+          'type': '',
+          'descr': '',
+          'position': {
+            'x': LONGITUDE,
+            'y': LATITUDE
+          },
+          CORP_INFO_ID: 'f8da1790b1034058ae2efefd69af3284'
+        }
+      ]
+      this.form.LATITUDE = LATITUDE
+      this.form.LONGITUDE = LONGITUDE
+      this.form.LONGITUDEANDLATITUDE = this.form.LATITUDE + '--' + this.form.LONGITUDE
+      this.dragAreaEntity(initPoint)
+      ry_drag = new RyDragEntity({
+        viewer
+      })
+    },
+    // 加载点
+    dragAreaEntity(pointArr) {
+      console.log('pointArr', pointArr)
+      console.log('')
+      this.poinEntity = {}
+
+      const collection = new Cesium.CustomDataSource('clickEntityCollection')
+      pointArr.forEach(item => {
+        if (!this.poinEntity.hasOwnProperty(item.id)) {
+          const entity = drag.addEntity(item)
+          this.poinEntity[item.id] = entity
+          collection.entities.add(entity)
+        }
+      })
+      viewer.dataSources.removeAll()
+      viewer.dataSources.add(collection)
+    },
+    loadTilesetHandler() {
+      console.log('loadTilesetHandler')
+      Cesium.ExperimentalFeatures.enableModelExperimental = true
+      var cfdd = new Cesium.Cesium3DTileset({
+        url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/merge_tile.json'
+      })
+      viewer.scene.primitives.add(cfdd)
+
+      var cfdx = new Cesium.Cesium3DTileset({
+        url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/merge_tile.json'
+      })
+      viewer.scene.primitives.add(cfdx)
+
+      var qhdxys = new Cesium.Cesium3DTileset({
+        url: '/mapapi/ware/upload/qhdxys/merge_tile.json'
+      })
+      viewer.scene.primitives.add(qhdxys)
+
+      var qhdgysh = new Cesium.Cesium3DTileset({
+        url: '/mapapi/ware/upload/qhdgysh/merge_tile.json'
+      })
+      viewer.scene.primitives.add(qhdgysh)
+    },
+    transformWGS84ToCartesian: function(position, alt) {
+      // eslint-disable-next-line no-return-assign
+      return position ? Cesium.Cartesian3.fromDegrees(
+          position.lng || position.lon,
+          position.lat,
+          position.alt = alt || position.alt,
+          Cesium.Ellipsoid.WGS84
+        )
+        : Cesium.Cartesian3.ZERO
     }
   }
 }

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>

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>

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>

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>

src/views/relevantunits/audit/components/list.vue

@@ -357,7 +357,8 @@ export default {
           EMPLOYMENT_FORM: this.searchForm.EMPLOYMENT_FORM,
           SELECT_FORM: this.searchForm.SELECT_FORM,
           MAIN_DEP: JSON.parse(sessionStorage.getItem('user')).DEPARTMENT_ID,
-          CORP_TYPE: this.searchForm.CORP_TYPE
+          CORP_TYPE: this.searchForm.CORP_TYPE,
+          canApprove: '1'
         }
       ).then((data) => {
         this.listLoading = false

src/views/relevantunits/base/components/corpInfoList.vue

@@ -0,0 +1,520 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="130px" >
+      <el-row :gutter="24">
+        <el-col :span="6">
+          <el-form-item label="相关方单位名称">
+            <el-input v-model="KEYWORDS" style="width: 100%" placeholder="搜索相关方单位名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="开户时间">
+            <el-date-picker
+              v-model="date"
+              style="width: 100%"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="属地">
+            <el-cascader
+              ref="POSSESSION_SEARCH"
+              v-model="queryForm.POSSESSION"
+              :options="areaList"
+              :props="areaProps"
+              style="width: 100%"
+              placeholder="请选择属地"
+              @change="cascaderChange"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="集团单位">
+            <el-select v-model="queryForm.CORP_TYPE" style="width: 100%">
+              <el-option v-for="item in corpTypeList" :key="item.BIANMA" :label="item.NAME" :value="item.BIANMA"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="6">
+          <el-form-item label="股份主管部门">
+            <Treeselect
+              :options="treeData"
+              :normalizer="normalizer"
+              v-model="queryForm.MAIN_DEP"
+              placeholder="请选择主管部门"
+              no-options-text="请选择主管部门"
+              no-children-text="请选择主管部门"
+              style="width: 100%;"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="基层单位主管部门">
+            <Treeselect
+              :options="treeDataSupervise"
+              :normalizer="normalizer"
+              v-model="queryForm.SUPERVISE_DEPARTMENT_ID"
+              placeholder="请选择基层单位主管部门"
+              no-options-text="请选择基层单位主管部门"
+              no-children-text="请选择基层单位主管部门"
+              style="width: 100%;"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <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="resetSearch">
+            重置
+          </el-button>
+          <el-button v-waves class="filter-item" type="info" icon="el-icon-right" size="mini" plain @click="getDaochu">
+            导出全部数据
+          </el-button>
+          <el-button v-waves class="filter-item" type="info" icon="el-icon-right" size="mini" plain @click="getonly">
+            导出
+          </el-button>
+        </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'
+      }"
+      :row-class-name="tableRowClassName"
+      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="corpTypeName" label="集团单位" />
+      <el-table-column prop="RELEVANT_UNIT_NAME" label="相关方单位名称" />
+      <el-table-column label="属地">
+        <template slot-scope="{row}">
+          <span v-if="row.COMPANY_AREA">
+            {{ row.COMPANY_AREA.replaceAll(',',' ') }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="MAIN_DEPARTMENT_NAME" label="股份主管部门" />
+      <el-table-column prop="MANAGER_DEPARTMENT_NAME" label="股份监管部门" />
+      <el-table-column prop="SUPERVISE_CORPINFO_DEPT_NAME" label="基层单位主管部门" show-overflow-tooltip/>
+      <el-table-column prop="COMPETENT_DEPT_NAME" label="基层单位监管部门" show-overflow-tooltip/>
+      <el-table-column prop="CREATOR_NAME" label="开户人员" />
+      <el-table-column :formatter="(row) => formatStateLabel(row)" prop="STATE" label="状态" />
+      <el-table-column label="操作" align="center" width="300">
+        <template slot-scope="{row}">
+          <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="warning" icon="el-icon-refresh" size="mini" @click="resetPassword(row)">重置密码</el-button>
+          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCorpInfo(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="page-btn-group">
+      <div/>
+      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+    </div>
+  </div>
+</template>
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+import SelectTree from '@/components/SelectTree'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+export default {
+  components: { Pagination, SelectTree, Treeselect },
+  directives: { waves },
+  data() {
+    return {
+      normalizer(node) {
+        return {
+          id: node.id,
+          label: node.name,
+          children: node.nodes
+        }
+      },
+      config: config,
+      date: [],
+      startDate: '',
+      endDate: '',
+      treeData: [],
+      treeDataSupervise: [],
+      defaultProps: {
+        value: 'id',
+        children: 'nodes',
+        label: 'name'
+      },
+      DEPTIDS: '',
+      listLoading: true,
+      add: false,
+      del: false,
+      edit: false,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      total: 0,
+      KEYWORDS: '',
+      varList: [],
+      pd: [],
+      areaList: [], // 省市县列表
+      areaProps: {
+        lazy: true,
+        lazyLoad: async(node, resolve) => {
+          const resData = await this.getAreaDict(
+            (node.data && node.data.DICTIONARIES_ID) || 'e725d2a91b8248f4b8f49889038df7de'
+          )
+          const { level } = node
+          resolve(
+            resData.map((item) => {
+              return {
+                DICTIONARIES_ID: item.DICTIONARIES_ID,
+                BIANMA: item.BIANMA,
+                NAME: item.NAME,
+                leaf: level >= 3
+              }
+            })
+          )
+        },
+        value: 'BIANMA',
+        id: 'DICTIONARIES_ID',
+        label: 'NAME',
+        children: 'children',
+        checkStrictly: true
+      },
+      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
+      multipleSelection: [], // 当前页选中的数据
+      dialogFormEdit: false,
+      queryForm: {
+        POSSESSION: '', // 属地
+        MAIN_DEP: null, // 主管部门
+        PROVINCE: '',
+        CITY: '',
+        COUNTY: '',
+        VILLAGE: '',
+        cteateDate: '',
+        CORP_TYPE: ''
+      },
+      corpTypeList: []
+    }
+  },
+  created() {
+    console.log(this.$data)
+    this.getList()
+    this.getDict()
+    this.getTreeList()
+    // this.ROLE_ID
+  },
+  methods: {
+    onChange(value) {
+    },
+    getTreeList() {
+      requestFN(
+        '/department/listTree/',
+        {}
+      ).then((data) => {
+        this.treeData = JSON.parse(data.zTreeNodes)
+      }).catch((e) => {
+      })
+    },
+    async getAreaDict(DICTIONARIES_ID) {
+      const { list } = await requestFN(
+        '/xgf/dictionaries/getAreaLevels',
+        {
+          DICTIONARIES_ID
+        }
+      )
+      return list
+    },
+    cascaderChange(e) {
+      this.$nextTick(() => {
+        const dom = document.getElementsByClassName('el-radio is-checked')
+        const radioDom = dom[dom.length - 1]
+        const brother = radioDom.nextElementSibling
+        if (radioDom.getElementsByClassName('el-radio__original')[0].value.split(',').length < 4) {
+          brother.click()
+        }
+      })
+    },
+    tableRowClassName({ row, rowIndex }) {
+      var timeType = this.judgeTime(row.CREATTIME)
+      if (timeType == 1) {
+        return 'yellow-row'
+      } else if (timeType == 2) {
+        return 'red-row'
+      }
+      return ''
+    },
+    judgeTime(startTime) {
+      startTime = startTime.replace(/\-/g, '/')
+      var endTime = new Date()
+      var sTime = new Date(startTime) // 开始时间
+      var eTime = new Date(endTime) // 结束时间
+      var timeType = 1000 * 3600 * 24
+      var differDay = (eTime.getTime() - sTime.getTime()) / timeType
+      var nineMon = 270
+      var oneYear = 365
+      if (differDay >= oneYear) {
+        return 2
+      }
+      if (differDay >= nineMon) {
+        return 1
+      }
+      return 0
+    },
+    getRowKey(row) {
+      return row.CORPINFO_ID
+    },
+    // 搜索
+    getQuery() {
+      this.$refs.multipleTable.clearSelection()
+      this.getList()
+    },
+    // 获取列表
+    getList() {
+      this.listLoading = true
+      if (this.date.length > 1) {
+        this.startDate = this.date[0] + ' ' + '00:00:00'
+        this.endDate = this.date[1] + ' ' + '23:59:59'
+      } else if (this.date.length == 1) {
+        this.startDate = this.date[0] + ' ' + '00:00:00'
+      }
+      requestFN(
+        '/relevantunits/getCorpInfoList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          KEYWORDS: this.KEYWORDS,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          SUPERVISE_DEPARTMENT_ID: this.queryForm.SUPERVISE_DEPARTMENT_ID,
+          PROVINCE: this.queryForm.POSSESSION[0] || '',
+          CITY: this.queryForm.POSSESSION[1] || '',
+          COUNTY: this.queryForm.POSSESSION[2] || '',
+          VILLAGE: this.queryForm.POSSESSION[3] || '',
+          STREET: this.queryForm.POSSESSION[4] || '',
+          MAIN_DEP: this.queryForm.MAIN_DEP || JSON.parse(sessionStorage.getItem('user')).DEPARTMENT_ID,
+          CORP_TYPE: this.queryForm.CORP_TYPE,
+          TYPE: '1'
+        }
+      ).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
+      })
+    },
+    // 判断按钮权限，用于是否显示按钮
+    hasButton: function() {
+      var keys = 'relevantunits:add,relevantunits:del,relevantunits: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
+      })
+    },
+    // 编辑
+    goEditPage(ID) {
+      this.$parent.activeName = 'CorpInfoEdit'
+      this.$parent.CORPINFO_ID = ID
+    },
+    // 新增
+    handleAdd() {
+      this.$parent.activeName = 'CorpInfoAdd'
+    },
+    // 编辑
+    handleEdit(row) {
+      this.$parent.CORPINFO_ID = row.CORPINFO_ID
+      this.$parent.activeName = 'CorpInfoEdit'
+    },
+    // 重置
+    resetSearch() {
+      this.queryForm.POSSESSION = ''
+      this.queryForm.MAIN_DEP = null
+      this.queryForm.PROVINCE = ''
+      this.queryForm.CITY = ''
+      this.queryForm.SUPERVISE_DEPARTMENT_ID = null
+      this.queryForm.COUNTY = ''
+      this.queryForm.VILLAGE = ''
+      this.queryForm.cteateDate = ''
+      this.queryForm.CORP_TYPE = ''
+      this.date = []
+      this.KEYWORDS = ''
+      this.startDate = ''
+      this.endDate = ''
+      this.getList()
+    },
+    // 转换企业状态
+    formatStateLabel(row) {
+      const status = row.STATE
+      if (status) {
+        if (status === '0') {
+          return '未填报'
+        } else if (status === '-1') {
+          return '未审核'
+        } else if (status === '1') {
+          return '待审核'
+        } else if (status === '2') {
+          return '审核通过'
+        } else if (status === '3') {
+          return '已打回'
+        } else if (status === '4') {
+          return '已填报'
+        }
+      }
+      return status
+    },
+    // 重置密码
+    resetPassword(row) {
+      this.$confirm('确定重置该企业的密码?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/relevantunits/resetPassword',
+          {
+            CORPINFO_ID: row.CORPINFO_ID,
+            RELEVANT_UNIT_NAME: row.RELEVANT_UNIT_NAME
+          }
+        ).then(() => {
+          this.$message({
+            message: '重置成功',
+            type: 'success'
+          })
+          this.listLoading = false
+          this.getList()
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    // 删除相关方企业
+    deleteCorpInfo(row) {
+      this.$confirm('确定删除该企业吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/xgf/corp/deleteCorpInfo',
+          {
+            CORPINFO_ID: row.CORPINFO_ID,
+            RELEVANT_UNIT_NAME: row.RELEVANT_UNIT_NAME
+          }
+        ).then(() => {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+          this.listLoading = false
+          this.getList()
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    // 选择导出
+    getonly() {
+      const _selectData = this.$refs.multipleTable.selection
+      if (_selectData == null || _selectData.length == 0) {
+        this.$message({
+          message: '请选中要导出的数据...',
+          type: 'error'
+        })
+        return false
+      }
+      const ids = _selectData.map((item, index) => {
+        return item.CORPINFO_ID
+      }).join(',')
+      this.$confirm('确定要导出到excel吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = false
+        window.open(this.config.httpurl + '/relevantunits/excelAll?ids=' + ids)
+      }).catch(() => {
+        this.listLoading = false
+      })
+      this.listLoading = false
+    },
+    // 导出全部数据
+    getDaochu() {
+      this.$confirm('确定要导出到excel吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = false
+        window.open(this.config.httpurl + '/relevantunits/excelAll')
+      }).catch(() => {
+        this.listLoading = false
+      })
+      this.listLoading = false
+    },
+    // 获取数据字典数据
+    getDict: function() {
+      requestFN(
+        '/corpDepartment/listTreeManageAndCorpHasOrder',
+        {}
+      ).then((data) => {
+        const treeData = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
+        this.treeDataSupervise = this.removeEmptyChildren(treeData)
+      }).catch((e) => {
+      })
+
+      requestFN(
+        '/xgf/dictionaries/getLevels',
+        {
+          DICTIONARIES_ID: '37d8385931f14bb0b962082cf6bb3395'
+        }
+      ).then((data) => {
+        this.corpTypeList = data.list
+      })
+    }
+  }
+}
+
+</script>
+<style>
+.el-table .yellow-row {
+  background: #f8e71c;
+}
+
+.el-table .red-row {
+  background: #fc0221;
+}
+</style>

src/views/relevantunits/base/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <component :is="activeName" />
+</template>
+
+<script>
+import CorpInfoList from './components/corpInfoList'
+import CorpInfoEdit from '../insert/components/corpInfoEdit'
+export default {
+  components: {
+    CorpInfoList: CorpInfoList,
+    CorpInfoEdit: CorpInfoEdit
+  },
+  data() {
+    return {
+      activeName: 'CorpInfoList',
+      CORPINFO_ID: '',
+      USERNAME: JSON.parse(sessionStorage.getItem('user')).USERNAME
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/relevantunits/cargo_owner/components/corpInfoList.vue

@@ -0,0 +1,519 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="130px" >
+      <el-row :gutter="24">
+        <el-col :span="6">
+          <el-form-item label="相关方单位名称">
+            <el-input v-model="KEYWORDS" style="width: 100%" placeholder="搜索相关方单位名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="开户时间">
+            <el-date-picker
+              v-model="date"
+              style="width: 100%"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="属地">
+            <el-cascader
+              ref="POSSESSION_SEARCH"
+              v-model="queryForm.POSSESSION"
+              :options="areaList"
+              :props="areaProps"
+              style="width: 100%"
+              placeholder="请选择属地"
+              @change="cascaderChange"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="集团单位">
+            <el-select v-model="queryForm.CORP_TYPE" style="width: 100%">
+              <el-option v-for="item in corpTypeList" :key="item.BIANMA" :label="item.NAME" :value="item.BIANMA"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="6">
+          <el-form-item label="股份主管部门">
+            <Treeselect
+              :options="treeData"
+              :normalizer="normalizer"
+              v-model="queryForm.MAIN_DEP"
+              placeholder="请选择主管部门"
+              no-options-text="请选择主管部门"
+              no-children-text="请选择主管部门"
+              style="width: 100%;"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="基层单位主管部门">
+            <Treeselect
+              :options="treeDataSupervise"
+              :normalizer="normalizer"
+              v-model="queryForm.SUPERVISE_DEPARTMENT_ID"
+              placeholder="请选择基层单位主管部门"
+              no-options-text="请选择基层单位主管部门"
+              no-children-text="请选择基层单位主管部门"
+              style="width: 100%;"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <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="resetSearch">
+            重置
+          </el-button>
+          <el-button v-waves class="filter-item" type="info" icon="el-icon-right" size="mini" plain @click="getDaochu">
+            导出全部数据
+          </el-button>
+          <el-button v-waves class="filter-item" type="info" icon="el-icon-right" size="mini" plain @click="getonly">
+            导出
+          </el-button>
+        </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'
+      }"
+      :row-class-name="tableRowClassName"
+      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="corpTypeName" label="集团单位" />
+      <el-table-column prop="RELEVANT_UNIT_NAME" label="相关方单位名称" />
+      <el-table-column label="属地">
+        <template slot-scope="{row}">
+          <span v-if="row.COMPANY_AREA">
+            {{ row.COMPANY_AREA.replaceAll(',',' ') }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="MAIN_DEPARTMENT_NAME" label="股份主管部门" />
+      <el-table-column prop="MANAGER_DEPARTMENT_NAME" label="股份监管部门" />
+      <el-table-column prop="SUPERVISE_CORPINFO_DEPT_NAME" label="基层单位主管部门" show-overflow-tooltip/>
+      <el-table-column prop="COMPETENT_DEPT_NAME" label="基层单位监管部门" show-overflow-tooltip/>
+      <el-table-column prop="CREATOR_NAME" label="开户人员" />
+      <el-table-column :formatter="(row) => formatStateLabel(row)" prop="STATE" label="状态" />
+      <el-table-column label="操作" align="center" width="300">
+        <template slot-scope="{row}">
+          <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="warning" icon="el-icon-refresh" size="mini" @click="resetPassword(row)">重置密码</el-button>
+          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCorpInfo(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="page-btn-group">
+      <div/>
+      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+    </div>
+  </div>
+</template>
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+import SelectTree from '@/components/SelectTree'
+import Treeselect from '@riophae/vue-treeselect'
+export default {
+  components: { Pagination, SelectTree, Treeselect },
+  directives: { waves },
+  data() {
+    return {
+      normalizer(node) {
+        return {
+          id: node.id,
+          label: node.name,
+          children: node.nodes
+        }
+      },
+      config: config,
+      date: [],
+      startDate: '',
+      endDate: '',
+      treeData: [],
+      treeDataSupervise: [],
+      defaultProps: {
+        value: 'id',
+        children: 'nodes',
+        label: 'name'
+      },
+      DEPTIDS: '',
+      listLoading: true,
+      add: false,
+      del: false,
+      edit: false,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      total: 0,
+      KEYWORDS: '',
+      varList: [],
+      pd: [],
+      areaList: [], // 省市县列表
+      areaProps: {
+        lazy: true,
+        lazyLoad: async(node, resolve) => {
+          const resData = await this.getAreaDict(
+            (node.data && node.data.DICTIONARIES_ID) || 'e725d2a91b8248f4b8f49889038df7de'
+          )
+          const { level } = node
+          resolve(
+            resData.map((item) => {
+              return {
+                DICTIONARIES_ID: item.DICTIONARIES_ID,
+                BIANMA: item.BIANMA,
+                NAME: item.NAME,
+                leaf: level >= 3
+              }
+            })
+          )
+        },
+        value: 'BIANMA',
+        id: 'DICTIONARIES_ID',
+        label: 'NAME',
+        children: 'children',
+        checkStrictly: true
+      },
+      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
+      multipleSelection: [], // 当前页选中的数据
+      dialogFormEdit: false,
+      queryForm: {
+        POSSESSION: '', // 属地
+        MAIN_DEP: null, // 主管部门
+        PROVINCE: '',
+        CITY: '',
+        COUNTY: '',
+        VILLAGE: '',
+        cteateDate: '',
+        CORP_TYPE: ''
+      },
+      corpTypeList: []
+    }
+  },
+  created() {
+    console.log(this.$data)
+    this.getList()
+    this.getDict()
+    this.getTreeList()
+    // this.ROLE_ID
+  },
+  methods: {
+    onChange(value) {
+    },
+    getTreeList() {
+      requestFN(
+        '/department/listTree/',
+        {}
+      ).then((data) => {
+        this.treeData = JSON.parse(data.zTreeNodes)
+      }).catch((e) => {
+      })
+    },
+    async getAreaDict(DICTIONARIES_ID) {
+      const { list } = await requestFN(
+        '/xgf/dictionaries/getAreaLevels',
+        {
+          DICTIONARIES_ID
+        }
+      )
+      return list
+    },
+    cascaderChange(e) {
+      this.$nextTick(() => {
+        const dom = document.getElementsByClassName('el-radio is-checked')
+        const radioDom = dom[dom.length - 1]
+        const brother = radioDom.nextElementSibling
+        if (radioDom.getElementsByClassName('el-radio__original')[0].value.split(',').length < 4) {
+          brother.click()
+        }
+      })
+    },
+    tableRowClassName({ row, rowIndex }) {
+      var timeType = this.judgeTime(row.CREATTIME)
+      if (timeType == 1) {
+        return 'yellow-row'
+      } else if (timeType == 2) {
+        return 'red-row'
+      }
+      return ''
+    },
+    judgeTime(startTime) {
+      startTime = startTime.replace(/\-/g, '/')
+      var endTime = new Date()
+      var sTime = new Date(startTime) // 开始时间
+      var eTime = new Date(endTime) // 结束时间
+      var timeType = 1000 * 3600 * 24
+      var differDay = (eTime.getTime() - sTime.getTime()) / timeType
+      var nineMon = 270
+      var oneYear = 365
+      if (differDay >= oneYear) {
+        return 2
+      }
+      if (differDay >= nineMon) {
+        return 1
+      }
+      return 0
+    },
+    getRowKey(row) {
+      return row.CORPINFO_ID
+    },
+    // 搜索
+    getQuery() {
+      this.$refs.multipleTable.clearSelection()
+      this.getList()
+    },
+    // 获取列表
+    getList() {
+      this.listLoading = true
+      if (this.date.length > 1) {
+        this.startDate = this.date[0] + ' ' + '00:00:00'
+        this.endDate = this.date[1] + ' ' + '23:59:59'
+      } else if (this.date.length == 1) {
+        this.startDate = this.date[0] + ' ' + '00:00:00'
+      }
+      requestFN(
+        '/relevantunits/getCorpInfoList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          KEYWORDS: this.KEYWORDS,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          SUPERVISE_DEPARTMENT_ID: this.queryForm.SUPERVISE_DEPARTMENT_ID,
+          PROVINCE: this.queryForm.POSSESSION[0] || '',
+          CITY: this.queryForm.POSSESSION[1] || '',
+          COUNTY: this.queryForm.POSSESSION[2] || '',
+          VILLAGE: this.queryForm.POSSESSION[3] || '',
+          STREET: this.queryForm.POSSESSION[4] || '',
+          MAIN_DEP: this.queryForm.MAIN_DEP || JSON.parse(sessionStorage.getItem('user')).DEPARTMENT_ID,
+          CORP_TYPE: this.queryForm.CORP_TYPE,
+          TYPE: '2'
+        }
+      ).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
+      })
+    },
+    // 判断按钮权限，用于是否显示按钮
+    hasButton: function() {
+      var keys = 'relevantunits:add,relevantunits:del,relevantunits: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
+      })
+    },
+    // 编辑
+    goEditPage(ID) {
+      this.$parent.activeName = 'CorpInfoEdit'
+      this.$parent.CORPINFO_ID = ID
+    },
+    // 新增
+    handleAdd() {
+      this.$parent.activeName = 'CorpInfoAdd'
+    },
+    // 编辑
+    handleEdit(row) {
+      this.$parent.CORPINFO_ID = row.CORPINFO_ID
+      this.$parent.activeName = 'CorpInfoEdit'
+    },
+    // 重置
+    resetSearch() {
+      this.queryForm.POSSESSION = ''
+      this.queryForm.MAIN_DEP = null
+      this.queryForm.PROVINCE = ''
+      this.queryForm.CITY = ''
+      this.queryForm.SUPERVISE_DEPARTMENT_ID = null
+      this.queryForm.COUNTY = ''
+      this.queryForm.VILLAGE = ''
+      this.queryForm.cteateDate = ''
+      this.queryForm.CORP_TYPE = ''
+      this.date = []
+      this.KEYWORDS = ''
+      this.startDate = ''
+      this.endDate = ''
+      this.getList()
+    },
+    // 转换企业状态
+    formatStateLabel(row) {
+      const status = row.STATE
+      if (status) {
+        if (status === '0') {
+          return '未填报'
+        } else if (status === '-1') {
+          return '未审核'
+        } else if (status === '1') {
+          return '待审核'
+        } else if (status === '2') {
+          return '审核通过'
+        } else if (status === '3') {
+          return '已打回'
+        } else if (status === '4') {
+          return '已填报'
+        }
+      }
+      return status
+    },
+    // 重置密码
+    resetPassword(row) {
+      this.$confirm('确定重置该企业的密码?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/relevantunits/resetPassword',
+          {
+            CORPINFO_ID: row.CORPINFO_ID,
+            RELEVANT_UNIT_NAME: row.RELEVANT_UNIT_NAME
+          }
+        ).then(() => {
+          this.$message({
+            message: '重置成功',
+            type: 'success'
+          })
+          this.listLoading = false
+          this.getList()
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    // 删除相关方企业
+    deleteCorpInfo(row) {
+      this.$confirm('确定删除该企业吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/xgf/corp/deleteCorpInfo',
+          {
+            CORPINFO_ID: row.CORPINFO_ID,
+            RELEVANT_UNIT_NAME: row.RELEVANT_UNIT_NAME
+          }
+        ).then(() => {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+          this.listLoading = false
+          this.getList()
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    // 选择导出
+    getonly() {
+      const _selectData = this.$refs.multipleTable.selection
+      if (_selectData == null || _selectData.length == 0) {
+        this.$message({
+          message: '请选中要导出的数据...',
+          type: 'error'
+        })
+        return false
+      }
+      const ids = _selectData.map((item, index) => {
+        return item.CORPINFO_ID
+      }).join(',')
+      this.$confirm('确定要导出到excel吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = false
+        window.open(this.config.httpurl + '/relevantunits/excelAll?ids=' + ids)
+      }).catch(() => {
+        this.listLoading = false
+      })
+      this.listLoading = false
+    },
+    // 导出全部数据
+    getDaochu() {
+      this.$confirm('确定要导出到excel吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = false
+        window.open(this.config.httpurl + '/relevantunits/excelAll')
+      }).catch(() => {
+        this.listLoading = false
+      })
+      this.listLoading = false
+    },
+    // 获取数据字典数据
+    getDict: function() {
+      requestFN(
+        '/corpDepartment/listTreeManageAndCorpHasOrder',
+        {}
+      ).then((data) => {
+        const treeData = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
+        this.treeDataSupervise = this.removeEmptyChildren(treeData)
+      }).catch((e) => {
+      })
+
+      requestFN(
+        '/xgf/dictionaries/getLevels',
+        {
+          DICTIONARIES_ID: '37d8385931f14bb0b962082cf6bb3395'
+        }
+      ).then((data) => {
+        this.corpTypeList = data.list
+      })
+    }
+  }
+}
+
+</script>
+<style>
+.el-table .yellow-row {
+  background: #f8e71c;
+}
+
+.el-table .red-row {
+  background: #fc0221;
+}
+</style>

src/views/relevantunits/cargo_owner/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <component :is="activeName" />
+</template>
+
+<script>
+import CorpInfoList from './components/corpInfoList'
+import CorpInfoEdit from '../insert/components/corpInfoEdit'
+export default {
+  components: {
+    CorpInfoList: CorpInfoList,
+    CorpInfoEdit: CorpInfoEdit
+  },
+  data() {
+    return {
+      activeName: 'CorpInfoList',
+      CORPINFO_ID: '',
+      USERNAME: JSON.parse(sessionStorage.getItem('user')).USERNAME
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/relevantunits/insert/components/corpInfoAdd.vue

@@ -80,6 +80,15 @@
                 <el-input id="CREATOR" ref="CREATOR" v-model="CREATOR_NAME" maxlength="50" placeholder="开户人" title="开户人" disabled/>
               </el-form-item>
             </el-col>
+            <el-col :span="12">
+              <el-form-item label="企业类型" prop="CREATOR">
+                <el-select v-model="form.TYPE" clearable style="width: 100%">
+                  <el-option label="驻港企业" value="1"/>
+                  <el-option label="货主企业" value="2"/>
+                </el-select>
+                <h style="color: red;font-size: 10px">注意：若相关方企业类型为驻港、货主时，该企业的所有信息将不会被统计在相关方统计中，仅在对应的统计功能中展示</h>
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-row>
             <el-col :span="12">
@@ -354,7 +363,8 @@ export default {
         CITY: '',
         COUNTY: '',
         VILLAGE: '',
-        INDUSTRYALL: ''
+        INDUSTRYALL: '',
+        TYPE: ''
       },
       hylxList: [], // 国民经济行业分类 (GB-T4754-2017)
       dialogImageUrl: '', // 上传图片预览

src/views/relevantunits/insert/components/corpInfoEdit.vue

@@ -83,6 +83,14 @@
                 <el-input id="CREATOR" ref="CREATOR" v-model="CREATOR_NAME" maxlength="50" placeholder="开户人" title="开户人" disabled/>
               </el-form-item>
             </el-col>
+            <el-col :span="12">
+              <el-form-item label="企业类型" prop="CREATOR">
+                <el-select v-model="form.TYPE" clearable style="width: 100%">
+                  <el-option label="驻港企业" value="1"/>
+                  <el-option label="货主企业" value="2"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-row :gutter="24">
             <el-col :span="12">
@@ -232,7 +240,6 @@ export default {
         {
           RELEVANT_UNIT_NAME: value,
           CORPINFO_ID: this.$parent.CORPINFO_ID
-
         }
       ).then((data) => {
         if (data.pd) {
@@ -370,7 +377,8 @@ export default {
         CITY: '',
         COUNTY: '',
         VILLAGE: '',
-        INDUSTRYALL: ''
+        INDUSTRYALL: '',
+        TYPE: ''
       },
       hylxList: [], // 国民经济行业分类 (GB-T4754-2017)
       dialogImageUrl: '', // 上传图片预览

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>

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>

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>

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>

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>