门口门禁-人行、车行记录页面
water_xu
parent
7b3cda2706
commit
e342714e09
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="rightCont">
|
||||
<div>
|
||||
<span @click="people" style="margin: 10px;">车行口门记录</span>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:data="varList"
|
||||
:row-key="getRowKey"
|
||||
border
|
||||
tooltip-effect="dark"
|
||||
:cell-style="getPlateColor"
|
||||
style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="55" 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_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-column prop="vehicle_arrival_status" label="车辆在港状态" width="100px" align="center"/>
|
||||
<el-table-column prop="vehicle_filing_info_recording_org" label="车辆备案单位" align="center"/>
|
||||
<el-table-column prop="vehicle_filing_method" label="车辆备案方式" width="100px" align="center"/>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<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
|
||||
|
||||
export default {
|
||||
components: { Pagination },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
varList: [],
|
||||
pd: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.getDict()
|
||||
},
|
||||
methods: {
|
||||
getPlateColor(row , column , rowIndex , columnIndex){
|
||||
if(row.column.label == '车牌号'){
|
||||
switch(row.row.vehicle_plate_color){
|
||||
case '蓝牌':
|
||||
return 'background-color: blue;color: white'
|
||||
break
|
||||
case '黄牌':
|
||||
return 'background-color: yellow;color: black'
|
||||
break
|
||||
case '新能源':
|
||||
return 'background-color: green;color: white'
|
||||
break
|
||||
case '白牌':
|
||||
return 'background-color: gray;color: black'
|
||||
break
|
||||
case '黑牌':
|
||||
return 'background-color: black;color: white'
|
||||
break
|
||||
case '其他':
|
||||
return 'background-color: white;color: black'
|
||||
break
|
||||
default:
|
||||
return 'background-color: white;color: black'
|
||||
}
|
||||
}
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.id_sequence
|
||||
},
|
||||
|
||||
getQuery() {
|
||||
this.getList()
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.varList = []
|
||||
requestFN(
|
||||
'/mkmjGateLog/page?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
this.hasButton()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
people(){
|
||||
this.$parent.activeName = 'peopleRecordList'
|
||||
},
|
||||
|
||||
getDict() {
|
||||
requestFN(
|
||||
'/corpinfo/getSelectByCorpInfo',
|
||||
{
|
||||
}
|
||||
).then((data) => {
|
||||
this.corpList = JSON.parse(data.corpInfoJson)
|
||||
}).catch((e) => {
|
||||
})
|
||||
requestFN(
|
||||
'dictionaries/getLevels',
|
||||
{
|
||||
DICTIONARIES_ID: '6bba977985f6427e9d0b52afe8884d1a'
|
||||
}
|
||||
).then((data) => {
|
||||
this.typeData = data.list
|
||||
})
|
||||
.catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.returnBtn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex; /**/
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.rightCont {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="rightCont">
|
||||
<div>
|
||||
<span @click="car" style="margin: 10px;" >人行口门记录</span>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:data="varList"
|
||||
:row-key="getRowKey"
|
||||
border
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="55" align="center"/>
|
||||
<el-table-column prop="departmentName" label="公司" align="center"/>
|
||||
<el-table-column prop="personName" label="人员" width="100px" align="center"/>
|
||||
<el-table-column prop="sex" label="性别" width="50px" align="center"/>
|
||||
<el-table-column prop="inOrOut" label="类型" width="50px" align="center"/>
|
||||
<el-table-column prop="regionName" label="区域名称" width="80px" align="center"/>
|
||||
<el-table-column prop="channelName" label="通道名称" align="center"/>
|
||||
<el-table-column prop="personType" label="身份类别" width="150px" align="center"/>
|
||||
<el-table-column prop="cardNumber" label="卡号" width="100px" align="center"/>
|
||||
<el-table-column prop="personCode" label="用户编号" width="100px" align="center"/>
|
||||
<el-table-column prop="openType" label="验证方式" width="150px" align="center"/>
|
||||
<el-table-column prop="reportTime" label="上报时间" align="center"/>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<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
|
||||
|
||||
export default {
|
||||
components: { Pagination },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
varList: [],
|
||||
pd: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.getDict()
|
||||
},
|
||||
methods: {
|
||||
getRowKey(row) {
|
||||
return row.id_sequence
|
||||
},
|
||||
|
||||
getQuery() {
|
||||
this.getList()
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.varList = []
|
||||
requestFN(
|
||||
'/mkmjGateLog/peoplePage?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.page.pd.data
|
||||
this.total = data.page.totalResult
|
||||
this.hasButton()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
car(){
|
||||
this.$parent.activeName = 'carRecordList'
|
||||
},
|
||||
|
||||
getDict() {
|
||||
requestFN(
|
||||
'/corpinfo/getSelectByCorpInfo',
|
||||
{
|
||||
}
|
||||
).then((data) => {
|
||||
this.corpList = JSON.parse(data.corpInfoJson)
|
||||
}).catch((e) => {
|
||||
})
|
||||
requestFN(
|
||||
'dictionaries/getLevels',
|
||||
{
|
||||
DICTIONARIES_ID: '6bba977985f6427e9d0b52afe8884d1a'
|
||||
}
|
||||
).then((data) => {
|
||||
this.typeData = data.list
|
||||
})
|
||||
.catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.returnBtn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex; /**/
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.rightCont {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<component :is="activeName" />
|
||||
<div>
|
||||
<carRecordList v-show="activeName=='carRecordList'" ref="carRecordList" />
|
||||
<peopleRecordList v-if="activeName=='peopleRecordList'" ref="peopleRecordList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/list.vue'
|
||||
import carRecordList from './components/carRecordList.vue'
|
||||
import peopleRecordList from './components/peopleRecordList.vue'
|
||||
export default {
|
||||
components: {
|
||||
List: List,
|
||||
carRecordList: carRecordList,
|
||||
peopleRecordList:peopleRecordList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'List',
|
||||
activeName: 'carRecordList',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue