通行记录模糊查询实现方法 - 详细步骤与代码示例
<template>
<div class='path-card right-path pointerBlock'>
<div class='content'>
<div class='item '>
<div class='town-info pt-15'>
<div class='chart border-line' style='height: 140px; padding-bottom: 10px'>
<chart4 :value1='0.26' :value2='0.45' :title='['车辆进场', '车辆出场']' :refresh='['9:00已刷新', '9:00已刷新']'></chart4>
</div>
<div class='traffic border-line'>
<div class='traffic-item'>
<img src='../../assets/images/icon4.png' alt='' />
<div class='traffic-num'>
<div class='BwFont blue' style='font-size: 35px'>208</div>
<div style='color: #81a5ad; margin-top: 10px; '>
停车场总车位
</div>
</div>
<pre><code> </div>
<div class='traffic-item'>
<img src='../../assets/images/icon5.png' alt='' />
<div class='traffic-num'>
<div class='BwFont blue' style='font-size: 35px'>643</div>
<div style='color: #81a5ad; margin-top: 10px; '>
剩余车位
</div>
</div>
</div>
<div class='traffic-item'>
<img src='../../assets/images/icon6.png' alt='' />
<div class='traffic-num'>
<div class='BwFont blue' style='font-size: 35px'>356</div>
<div style='color: #81a5ad; margin-top: 10px; '>
在停社会车辆
</div>
</div>
</div>
<div class='traffic-item'>
<img src='../../assets/images/icon7.png' alt='' />
<div class='traffic-num'>
<div class='BwFont blue' style='font-size: 35px'>203</div>
<div style='color: #81a5ad; margin-top: 10px; '>
在停院职工车辆
</div>
</div>
</div>
</div>
<div class='reservation' style='padding-bottom: 0;'>
<div class='reservationItem'>
<div>总预约数</div>
<div class='BwFont blue' style='font-size: 35px;margin-top: 8px;'>456</div>
</div>
<div class='reservationImg'>
<div style='padding-top: 30px;'>
<svg-icon icon-class='icon-car' style='font-size: 30px;'></svg-icon>
</div>
<div>预约车位</div>
</div>
<div class='reservationItem'>
<div>VIP预约</div>
<div class='BwFont blue' style='font-size: 35px;margin-top: 8px;'>256</div>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='item-title'>通行记录</div>
<div class='town-info'>
<div class='search-box' >
<el-input placeholder='请输入查询信息' prefix-icon='el-icon-search' v-model='input' @input='filterItems'>
</el-input>
</div>
<div class='vehicle'>
<div class='vehicleItem' :class='vehicleIndex == 1 ? 'active' : ''' @click='vehicleIndex = 1'>人员通行</div>
<div class='vehicleItem' :class='vehicleIndex == 2 ? 'active' : ''' @click='vehicleIndex = 2'>车辆通行</div>
</div>
<div v-if='vehicleIndex == 1'>
<div class='table-box mt-15' >
<el-table
height='350'
:data='userList'
style='width: 100%' >
<el-table-column type='expand'>
<template slot-scope='{ row }'>
<div id='panelDetail'>
<img :src='row.img' style='width: 100px; height: 100px'>
<div class='panelInformation'>
<p>姓名：<span>{{ row.Name}}</span>
</p>
<p>部门：<span>{{ row.GroupName }}</span></p>
</div>
</div>
</template>
</el-table-column>
<el-table-column
label='编号'
prop='Id' width='80px'>
</el-table-column>
<el-table-column
label='姓名'
prop='Name' width='80px'>
</el-table-column>
<el-table-column
label='时间'
prop='recordTime'>
</el-table-column>
</el-table>
</div>
</div>
<div v-if='vehicleIndex == 2'>
<div class='list-title'>
<el-row>
<el-col :span='8'>车牌号</el-col>
<el-col :span='4'>类型</el-col>
<el-col :span='6'>进入时间</el-col>
<el-col :span='6'>停车时长</el-col>
</el-row>
</div>
<div class='user-list' style='height: 240px;'>
<div class='user-list-item' v-for='(item, index) in carList'
:key='index' >
<el-row>
<el-col :span='8'>{{ item.number }}</el-col>
<el-col :span='4'>
<span v-if='item.type==1'>进场</span>
<span v-if='item.type==0' style='color: #00aeff;'>出场</span>
</el-col>
<el-col :span='6'>{{ item.date }}</el-col>
<el-col :span='6'>
<span>{{ item.time }}</span>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</div>
</div>
</code></pre>
</div>
</template>
<script>
import chart4 from './chart/chart4';
import { getDoorPassLogs } from '@/api/EcardApi';
export default {
name: 'teaching-path',
components: {
chart4
},
data() {
return {
input: '',
vehicleIndex: '1',
userList: [],
carList: [
{ number: '皖AC540Q', type: '1', date: '05/11-11:28', time: '1小时5分' },
{ number: '皖AC540Q', type: '1', date: '05/11-11:28', time: '1小时5分' },
{ number: '皖AC540Q', type: '1', date: '05/11-11:28', time: '1小时5分' },
{ number: '皖AC540Q', type: '0', date: '05/11-11:28', time: '1小时5分' },
{ number: '皖AC540Q', type: '1', date: '05/11-11:28', time: '1小时5分' },
{ number: '皖AC540Q', type: '1', date: '05/11-11:28', time: '1小时5分' },
{ number: '皖AC540Q', type: '0', date: '05/11-11:28', time: '1小时5分' },
{ number: '皖AC540Q', type: '1', date: '05/11-11:28', time: '1小时5分' },
{ number: '皖AC540Q', type: '1', date: '05/11-11:28', time: '1小时5分' }
],
img: ''
};
},
mounted() {
// 监听 leftToRightValue 事件，并获取传递的值
this.$bus.$on('leftToRightValue', (value) => {
console.log('接受传递过来的值', value);
this.getPassLogs(value);
});
this.userList = this.filterItems();
console.log('得到结果--> ', this.filterItems());
},
methods: {
// 模糊搜索
filterItems() {
console.log('查询内容-->', this.input);
if (this.input === '') {
return this.userList; // 如果搜索值为空，则返回全部项
} else {
return this.userList.filter(item => {
return item.Name.toLowerCase().includes(this.input.toLowerCase());
});
}
},
getPassLogs(name) {
name = '1#MJ1F23';
const nameParts = name.split('#');
const part1 = nameParts[0];
const part2 = nameParts[1];
getDoorPassLogs(part1, part2).then(res => {
console.log('门禁通行记录--->', res);
this.userList = res.data;
//this.img = 'http://192.168.50.2:18000'+res.data[0].PhotoPath.split(':')[1];
console.log('split------>', res.data[0].PhotoPath.split(':')[1])
//console.log('img--------->',this.img)
})
},
getImg(item) {
let PhotoPath = item.PhotoPath;
let img = 'http://192.168.50.2:18000' + PhotoPath.split(':')[1];
//this.img=img;
//console.log('img--------->',this.img)
},
//
timeChange(dateString) {
// 创建一个新的Date对象
var date = new Date(dateString);
// 使用日期方法获取年、月、日、小时、分钟和秒
var year = date.getFullYear();
var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，需要加1并补零
var day = ('0' + date.getDate()).slice(-2); // 补零
var hours = ('0' + date.getHours()).slice(-2); // 补零
var minutes = ('0' + date.getMinutes()).slice(-2); // 补零
var seconds = ('0' + date.getSeconds()).slice(-2); // 补零
// 格式化日期
var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
return formattedDate;
}
},
};
</script>
<style scoped lang='less'>
@import '@/style/style-my';
</style>
原文地址: https://www.cveoy.top/t/topic/pkbY 著作权归作者所有。请勿转载和采集!