通行记录模糊查询 - 快速查找人员和车辆通行信息
<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>
<p>内容：通行记录模糊查询的实现步骤如下：</p>
<ol>
<li>在data中添加一个input属性，用于存储用户输入的查询信息。</li>
<li>在el-input组件中添加v-model绑定input属性，实现输入框与数据的双向绑定。</li>
<li>在el-input组件的@input事件中调用filterItems方法，实现模糊查询功能。</li>
<li>在filterItems方法中判断输入值是否为空，如果为空，则返回全部项；如果不为空，则使用filter方法过滤出符合条件的项，并返回结果。</li>
<li>在页面加载完成后，通过mounted钩子函数调用filterItems方法，将查询结果赋值给userList数组，实现页面的初始化显示。</li>
<li>在el-table组件中使用:data绑定userList数组，实现数据的动态展示。</li>
<li>在el-input组件中添加prefix-icon属性，设置查询图标。</li>
<li>在el-table组件的el-table-column中，使用prop属性绑定对应的数据字段。</li>
<li>根据需要，可以在filterItems方法中添加更多的筛选条件，例如根据时间范围进行查询等。</li>
</ol>
<p>以上是实现通行记录模糊查询的基本步骤，根据具体需求可以进行适当调整和扩展。</p>
原文地址: https://www.cveoy.top/t/topic/pkb0 著作权归作者所有。请勿转载和采集!