guoyuepeng
/
qa-prevention-gwj-vue
1
0
Fork 3
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

1、口门门禁管理系统---长期车辆进港管理模块---分公司车辆信息 

2、口门门禁管理系统---车辆违规管理模块---车辆违规记录管理
3、口门门禁管理系统---车辆违规管理模块---黑名单管理
zhy_20241128
fufeifei 2024-11-21 15:54:06 +08:00
parent 7024f1bd82
commit 7d2f373490
8 changed files with 2131 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/components/Navbar.vue
View File

@ -39,6 +39,10 @@
<svg-icon icon-class="example" />
<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('comprehensive')">
<svg-icon icon-class="example" />
<span>综合管理</span>

826
src/views/longtermvehicleinputportmessage/vehiclemessage/components/list.vue Normal file
View File

@ -0,0 +1,826 @@
<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="vehicleDefaultProps"
v-model="searchFrom.VEHICLE_TYPE"
placeholder="请选择车辆类型"/>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="车辆所属部门" prop="VEHICLE_DEPARTMENT_ID">
<SelectTree
ref="selectTree_Search2"
:clearable="false"
:options="departmentTreeData"
:props="defaultProps"
v-model="searchFrom.VEHICLE_DEPARTMENT_ID"
placeholder="请选择车辆所属部门"/>
</el-form-item>
</el-col>
<el-col :span="3">
<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-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="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 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="departmentTreeData"
: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 :rules="[{required: true}]" label="车辆所属部门" prop="VEHICLE_DEPARTMENT_ID">
<SelectTree
ref="selectTree_edit"
:clearable="true"
:options="departmentTreeData"
:props="defaultProps"
v-model="editForm.VEHICLE_DEPARTMENT_ID"
placeholder="请选择车辆所属部门"
style="width: 300px"
@change="updateUserList"/>
</el-form-item>
<!-- 车辆责任人下拉框 -->
<el-form-item :rules="[{required: true}]" 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_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>
</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,
userInfo: JSON.parse(sessionStorage.getItem('user')),
listLoading: true,
add: false,
del: false,
edit: false,
listQuery: {
page: 1,
limit: 20
},
defaultProps: {
value: 'id',
children: 'nodes',
label: 'name'
},
total: 0,
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: [],
// 查询表单的数据
searchFrom: {
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: '', // 车辆责任人姓名
DEPARTMENT_NAME: '', // 车辆所属部门名称
EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人
EMPLOYEE_VEHICLE_USER_NAME: '', // 车辆所属人姓名
VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门
VEHICLE_DEPARTMENT_NAME: '' // 车辆所属部门名称
},
// 详情表单的数据
detailForm: {
LICENCE_NO: '', // 车牌号
VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门
USER_ID: '', // 车辆责任人
EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人
LICENCE_TYPE: null, // 车牌类型
VEHICLE_TYPE: null // 车辆类型
},
addDialogVisible: false, // 添加弹窗的展示与不展示
editDialogVisible: false, // 编辑弹窗的展示与不展示
detailDialogVisible: false, // 详情弹窗的展示与不展示
userList: [], // 部门用户列表
selectTree_edit: []
}
},
created() {
// this.getDict() // 获取字典
this.getPageList() // 获取分页列表要展示的数据
this.getDepartmentTreeData() // 获取部门树的数据
this.getLoginUserInfo() // 获取当前登陆用户的信息
},
methods: {
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
}
},
getLoginUserInfo() { // 获取登录人信息
return new Promise((resolve) => {
requestFN(
'/user/goEditMyInfo',
{}
).then((data) => {
this.loginUserId = data.pd.USER_ID
this.loginUserName = data.pd.NAME
resolve('ok')
}).catch((e) => {
})
})
},
// 搜索
getQuery() {
this.$refs.vehicleMessageTable.clearSelection() // 先置空表格再查询
this.getPageList()
},
goKeyReset() {
this.resetSearch()
this.getQuery()
},
// 获取列表
getPageList() {
this.listLoading = true
requestFN(
'vehiclemessage/getPageList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
{
...this.searchFrom
}
).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
}
).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.VEHICLE_DEPARTMENT_ID = data.pd.VEHICLE_DEPARTMENT_ID // 车辆归属公司或责任公司（车辆所属部门）
this.editForm.VEHICLE_DEPARTMENT_ID = ''
// this.$refs.selectTree_edit.clearHandle()
const node = {}
node.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.$parent.activeName = 'Info'
// this.$parent.INSPECTION_ID = row.INSPECTION_ID
this.detailForm = {
LICENCE_NO: '', // 车牌号
VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门
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.USER_ID = data.pd.NAME // 车辆责任人
this.detailForm.LICENCE_TYPE = this.translateLicenceType(data.pd.LICENCE_TYPE) // 车牌类型
this.detailForm.VEHICLE_TYPE = this.translateVehicleType(data.pd.VEHICLE_TYPE) // 车辆类型
} 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.searchFrom = {
LICENCE_NO: '' // 车牌号（输入框）
}
this.$refs.selectTree_Search1.clearHandle() // 清空
this.$refs.selectTree_Search2.clearHandle()
},
addUserList(DEPARTMENT_ID) {
this.getUserList(DEPARTMENT_ID)
this.handleDepartmentAddChange(DEPARTMENT_ID)
},
updateUserList(DEPARTMENT_ID) {
this.getUserList(DEPARTMENT_ID)
this.handleDepartmentUpdateChange(DEPARTMENT_ID)
},
getUserList(DEPARTMENT_ID) { // 根据部门获取部门内的人员
requestFN(
'/user/listAll',
{
DEPARTMENT_ID: DEPARTMENT_ID,
tm: new Date().getTime()
}
).then((data) => {
this.userList = data.userList
}).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.departmentTreeData, value)
},
handleDepartmentUpdateChange(value) {
this.editForm.VEHICLE_DEPARTMENT_NAME = this.findLabelByValue(this.departmentTreeData, 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 = ''
}
},
resetForm(row) {
this.searchFrom = {
LICENCE_NO: '', // 车牌号
VEHICLE_TYPE: '', // 车辆类型
VEHICLE_DEPARTMENT_ID: '' // 车辆所属部门
}
},
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
}
}
}
}
}
}
</script>

31
src/views/longtermvehicleinputportmessage/vehiclemessage/index.vue Normal file
View File

@ -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',
INSPECTION_ID: ''
}
},
watch: {
activeName(newValue, oldValue) {
if (newValue == 'List') {
this.$refs.list.getQuery()
}
}
}
}
</script>
<style scoped>
</style>

444
src/views/vehiclebreakrulesmanage/blacklistmanage/components/list.vue Normal file
View File

@ -0,0 +1,444 @@
<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="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,
// 分页列表相关的三个属性
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.getDict() // 获取字典
this.getPageList() // 获取分页列表要展示的数据
this.getDepartmentTreeData() // 获取部门树的数据
// this.getLoginUserInfo() // 获取当前登陆用户的信息
},
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
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
}
).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
}
).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>

31
src/views/vehiclebreakrulesmanage/blacklistmanage/index.vue Normal file
View File

@ -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>

200
src/views/vehiclebreakrulesmanage/breakrulesrecord/components/info.vue Normal file
View File

@ -0,0 +1,200 @@
<template>
<div class="app-container">
<!-- 违规详情列表 -->
<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>
<div class="page-btn-group">
<div>
<el-button plain type="info" @click="detailListReturnBtn">返回</el-button>
</div>
</div>
<!-- 查看详情 -->
<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>
</style>

561
src/views/vehiclebreakrulesmanage/breakrulesrecord/components/list.vue Normal file
View File

@ -0,0 +1,561 @@
<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="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: [], // 列表数据
// 部门树的数据和默认属性
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.getDict() // 获取字典
this.getPageList() // 获取分页列表要展示的数据
this.getDepartmentTreeData() // 获取部门树的数据
// this.getLoginUserInfo() // 获取当前登陆用户的信息
},
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
resolve('ok')
}).catch((e) => {
})
})
},
// 搜索按钮的点击事件
getQuery() {
// vehicleMessageTable 需要置空表格的ref值
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
}
).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
}
).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>

34
src/views/vehiclebreakrulesmanage/breakrulesrecord/index.vue Normal file
View File

@ -0,0 +1,34 @@
<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
}
},
watch: {
activeName(newValue, oldValue) {
if (newValue == 'List') {
this.$refs.list.getQuery()
}
}
}
}
</script>
<style scoped>
</style>