<template>
<div class="wrap">
<div class="header">
人员轨迹追踪
<svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
</div>
<el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
<el-row :gutter="20">
<el-col :span="12" class="form-item-person-info">
<el-form-item label="人员信息" prop="personName" style="position:relative">
<el-select
v-model="listQuery.personName"
value-key="personName"
:loading="selectLoading"
:remote-method="remoteMethod"
clear
filterable
remote
reserve-keyword
size="small"
placeholder="请输入人员姓名"
:popper-append-to-body="false"
@change="handlePerson">
<el-option
v-for="item in personNameList"
:key="item.staffCode"
:label="item.personName + ' ' + item.personType"
:value="item.staffCode"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="起止时间" prop="timeRange">
<el-date-picker
v-model="listQuery.timeRange"
type="datetimerange"
range-separator="至"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="起始时间"
end-placeholder="终止时间"
size="small"
:clearable="false"
style="width:98%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" style="position:relative">
<el-col :span="10">
<el-form-item label="监控点位" prop="point">
<moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="最小相似度" prop="minSimilarity">
<el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
</el-form-item>
</el-col>
<el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
<el-button type="primary" size="small" style="margin-right:10px" @click="search">
查询
</el-button>
<el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
重置
</el-button>
<el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
驾驶舱轨迹上图
</el-button>
</el-col>
</el-row>
</el-form>
<!-- 列表显示 -->
<div class="list-wrap">
<div class="main">
<div v-for="item in list" :key="item" class="row">
<div v-for="child in item" :key="child" class="list-item">
<div class="img-wrap">
<img :src="child.facePicUrl" style="width:100%;height:100%">
</div>
<div class="title text-over">
{{ child.positionName ? child.positionName : '' }}
</div>
<div class="desc text-over" :title="child.devName">
{{ child.devName ? child.devName : '' }}
</div>
<div class="date" style="width:145px">
{{ child.time ? child.time : '' }}
</div>
<div class="ratio" style="width:145px">
{{ child.similarity ? child.similarity : '0%' }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { hikPic, userList } from '@/api/person'
import { getCameraList } from '@/api/device'
import moreSelect from './components/selectTree'
import { repostSocket } from '@/api/common'
export default {
name: 'TrailDialog',
components: { moreSelect },
data() {
return {
selectLoading: false,
personName: '',
point: [],
listQuery: {
facePicUrl: '', // 图片url
personName: '', // 人员名称
startTime: '', // 开始时间
endTime: '', // 结束时间
cameraIndexCodes: [], // 点位
minSimilarity: '50', // 相似度
timeRange: [] // 时间范围
},
personNameList: [
// {
// "personName": "郑11",
// "personNo": "TV11326",
// "personPicture": "",
// "personType": "",
// "picUri": "",
// "serverIndexCode": "",
// "staffCode": ""
// },
// {
// "personName": "邓榆琦",
// "personNo": "",
// "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
// "personType": "访客",
// "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
// "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
// "staffCode": ""
// },
// {
// "personName": "邓榆琦",
// "personNo": "",
// "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
// "personType": "访客",
// "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
// "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
// "staffCode": ""
// },
// {
// "personName": "邓榆琦",
// "personNo": "",
// "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
// "personType": "访客",
// "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
// "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
// "staffCode": ""
// }
],
resourceTreeList: [],
defaultProps: {
children: 'children',
value: 'id',
label: 'devName'
},
list: [
// {
// "personName": "邓榆琦",
// "personNo": "",
// "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
// "personType": "访客",
// "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
// "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
// "staffCode": ""
// },
// {
// "personName": "邓榆琦",
// "personNo": "",
// "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
// "personType": "访客",
// "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
// "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
// "staffCode": ""
// },
// {
// "personName": "邓榆琦",
// "personNo": "",
// "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
// "personType": "访客",
// "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
// "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
// "staffCode": ""
// }
],
wallList: '',
rules: {
personName: [
{ required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
],
minSimilarity: [
{ required: true, message: '请填写最小相似度', trigger: 'blur' },
{ pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
],
timeRange: [
{ required: true, message: '请填写日期', trigger: 'change' }
]
}
}
},
watch: {
'listQuery.timeRange'(val) {
if (val && val.length > 0) {
this.listQuery.startTime = val[0]
this.listQuery.endTime = val[1]
}
}
},
created() {
// this.list = this.handleListOrder(this.list)
// this.handleGetUserList() // 获取人员信息数据
this.handlePointTreeData() // 获取点位数据
},
methods: {
// 关闭面板
close() {
const params = {
type: 'trail',
message: 'close'
}
repostSocket(params).then(response => {
if (response.code === 200) {
console.log('close')
}
})
},
// 获取下拉树形点位数据
getSelectedValue(val) {
this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
},
// select远程搜索方法
remoteMethod(query) {
if (query !== '') {
this.selectLoading = true
this.handleGetUserList(query)
} else {
this.personNameList = []
}
},
// 赋值select参数
handlePerson(person) {
// this.personNameList.map(item => {
// if (item.personName === this.listQuery.personName) {
// this.listQuery.facePicUrl = item.personPicture
// this.listQuery.gender = item.gender
// return
// }
// })
this.personNameList.map(item => {
if (item.staffCode === person) {
this.personName = item.personName
// this.listQuery.personName = item.personName
this.listQuery.facePicUrl = item.personPicture
this.listQuery.gender = item.gender
return
}
})
},
// 获取点位树
handlePointTreeData() {
getCameraList({ keywords: '' }).then(response => {
this.resourceTreeList = response.data
})
},
// 处理返回显示列表数据
handleListOrder(list, num = 2) {
const len = list.length
const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
const newArr = []
for (let i = 0; i < lineNum; i++) {
const temp = list.slice(i * num, i * num + num)
newArr.push(temp)
}
return newArr
},
// 人员搜索
handleGetUserList(keywords) {
userList({ keywords }).then(response => {
this.personNameList = response.data
this.selectLoading = false
})
},
// 搜索请求发起
fetchData() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const postData = Object.assign(this.listQuery, { 'personName': this.personName })
console.log(postData)
hikPic(postData).then(response => {
loading.close()
if (response.code === 200) {
// this.list = response.data
this.wallList = JSON.stringify(response.data)
this.list = this.handleListOrder(response.data)
}
}).catch(e => {
loading.close()
})
},
// 清除输入
clearInput() {
this.$refs.ruleForm.clearValidate()
this.$refs.moreSelect.clearHandle()
this.point = []
this.listQuery.personName = ''
this.listQuery.facePicUrl = ''
this.listQuery.cameraIndexCodes = []
this.listQuery.startTime = ''
this.listQuery.endTime = ''
this.listQuery.minSimilarity = '50'
this.listQuery.timeRange = ['', '']
this.personName = ''
this.list = []
},
// 轨迹上墙
onwall() {
if (this.list.length === 0) {
this.$message.warning('无记录上图，请重新搜索!')
return
}
const params = {
type: 'onwall-' + this.listQuery.personName,
message: this.wallList
}
repostSocket(params).then(response => {
if (response.code === 200) {
console.log(response)
}
})
},
// 搜索
search() {
console.log(this.listQuery)
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.fetchData()
} else {
this.$message.warning('请按要求填写查询条件！')
return
}
})
console.log(this.listQuery)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep(.el-input__inner){
border:1px solid #40C3F1 !important;
background: transparent !important;
color:#fff !important;
}
::v-deep(.el-range-input){
background: transparent !important;
color:#fff !important;
}
::v-deep(.el-form-item__label){
color:#f1f1f1 !important;
font-weight: 400 !important;
}
::v-deep(.el-range-separator){
color:#f1f1f1 !important;
font-weight: 400 !important;
color:#fff !important;
}
::v-deep(.el-select .el-select-dropdown__wrap) {
max-height: 350px !important;
overflow-y: auto !important;
}
.form-item-person-info:hover{
cursor: text !important;
}
.el-form-item__content:hover{
cursor: text !important;
}
::v-deep(.form-item-person-info .el-input__inner):hover{
cursor: text !important;
}
::-webkit-scrollbar {
z-index: 11;
width: 6px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
border-radius: 5px;
background: #fff;
}
::-webkit-scrollbar-thumb {
border-radius: 5px; // 滚动条
width: 6px;
background-color: #ccc;
:hover {
background-color: #ccc;
}
}
::-webkit-scrollbar-track-piece {
border-radius: 5px; // 轨道
background: #fff;
width: 6px;
}
.text-over{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.wrap{
width:100%;
height: 100%;
background: #5F8EB9;
position: relative;
overflow: hidden;
.header{
position: relative;
width: 98%;
margin-left:20px;
border-top: 10px solid #5F8EB9;
border-bottom: 10px solid #5F8EB9;
padding:5px 0 5px 20px;
color:#f1f1f1;
background: #30486C;
font-size: 16px;
}
}
.el-select{
width: 100%;
}
.header::after{
content:"";
display: inline-block;
position: absolute;
top:0;
left: -8px;
width:4px;
height:100%;
background: #40C3F1;
}
.list-wrap{
width:100%;
// width:900px;
height: calc(100% - 175px); // 去除头部区域
overflow-y: auto;
.main{
width:99%;
margin: 0 auto;
display: flex;
flex-direction: column;
.row {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.row:nth-child(2n) {
flex-direction: row-reverse;
}
.row:nth-child(2n):last-child .item {
margin-right: auto;
}
.list-item{
position: relative;
width: 48%;
height: 240px;
background-image: url("../../assets/global_images/monitor.png");
background-repeat: no-repeat;
background-size: cover;
// background-size: 100% 100%;
// margin-left: 20px;
z-index: 10;
.img-wrap{
position: absolute;
left:35px;
top:40px;
width:238px;
height:138px;
overflow: hidden;
z-index: -1;
}
.title{
width:150px;
position: absolute;
left:42%;
top: 40px;
font-size: 20px;
color:#40C3F1;
}
.desc{
width:150px;
position: absolute;
left:42%;
top: 75px;
font-size: 16px;
color:#f1f1f1;
}
.date{
position: absolute;
left:50%;
transform: translateX(-50%);
bottom:70px;
font-size: 14px;
color:#c1c1c1;
margin-left:25px;
}
.date::after{
position: absolute;
top:0;
left:-20px;
content:"";
display: inline-block;
width: 15px;
height: 15px;
background-image: url("../../assets/global_images/date.png");
background-repeat: no-repeat;
background-size: cover;
}
.ratio{
// width:100px;
position: absolute;
left:50%;
transform: translateX(-50%);
bottom:40px;
font-size: 14px;
color:#c1c1c1;
// margin-left:18px;
margin-left: 25px;
}
.ratio::after{
position: absolute;
top:0;
left:-20px;
content:"";
display: inline-block;
width: 15px;
height: 15px;
background-image: url("../../assets/global_images/search.png");
background-repeat: no-repeat;
background-size: cover;
}
}
}
}
.main .row:nth-child(odd){
.list-item:nth-child(odd)::after{
content:"";
display: inline-block;
width:30px;
height: 30px;
position: absolute;
top:50%;
transform: translate(-50%);
right:-52px;
background-image: url("../../assets/global_images/right.png");
background-repeat: no-repeat;
background-size: cover;
}
}
.main .row:nth-child(odd){
.list-item:nth-child(even)::after{
content:"";
display: inline-block;
width:30px;
height: 30px;
position: absolute;
right:50%;
transform: translate(-50%);
bottom:-35px;
background-image: url("../../assets/global_images/right.png");
background-repeat: no-repeat;
background-size: cover;
transform: rotate(90deg);
}
}
.main .row:nth-child(even){
.list-item:nth-child(odd)::after{
content:"";
display: inline-block;
width:30px;
height: 30px;
position: absolute;
top:50%;
transform: translate(-50%);
left:-35px;
background-image: url("../../assets/global_images/right.png");
background-repeat: no-repeat;
background-size: cover;
transform: rotate(180deg);
}
}
.main .row:nth-child(even){
.list-item:nth-child(even)::after{
content:"";
display: inline-block;
width:30px;
height: 30px;
position: absolute;
left:50%;
transform: translate(-50%);
bottom:-35px;
background-image: url("../../assets/global_images/right.png");
background-repeat: no-repeat;
background-size: cover;
transform: rotate(-270deg);
}
}
// 如果是最后一个元素不显示箭头
.main .row:last-child{
.list-item:last-child::after{
display: none;
}
}
.list-wrap .main .list-item .img-wrap{
position: absolute;
left: 32px;
top: 40px;
// width: 190px;
width: 212px;
height: 138px;
overflow: hidden;
z-index: -1;
}
.list-wrap .main .list-item .date{
left:75% !important;
margin-bottom: 20px;
}
.list-wrap .main .list-item .ratio{
left:75% !important;
}
.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
left:62% !important;
}
.close-icon{
z-index: 100;
position: absolute;
top:2px;
right:2px;
color:white;
background: #fc2323cc;
width:25px;
height:25px;
border-radius: 5px;
padding:3px;
}
</style>
