+
{{ child.time ? child.time : '' }}
-
+
{{ child.similarity ? child.similarity : '0%' }}
@@ -102,9 +101,8 @@
import { hikPic, userList } from '@/api/person'
import { getCameraList } from '@/api/device'
import { getDate } from '@/utils/calendarUtil'
-// import SelectTree from '@/components/SelectTree/singleSelect'
import moreSelect from './components/selectTree'
-import {repostSocket} from "@/api/common";
+import { repostSocket } from '@/api/common'
export default {
name: 'TrailDialog',
@@ -119,7 +117,8 @@
personType: '',
picUri: '',
serverIndexCode: '',
- staffCode: '0'
+ staffCode: '0',
+ gender: ''
},
point: [],
listQuery: {
@@ -128,9 +127,9 @@
startTime: '', // 开始时间
endTime: '', // 结束时间
cameraIndexCodes: [], // 点位
- minSimilarity: '' // 相似度
+ minSimilarity: '', // 相似度
+ timeRange: [] // 时间范围
},
- timeRange: [], // 时间范围
personNameList: [
// {
// "personName": "郑嘉辉",
@@ -169,29 +168,23 @@
list: [],
wallList: '',
rules: {
- cameraIndexCodes: [
- { required: true, message: '请填写监控点位', trigger: 'blur' }
- ],
personName: [
- { required: true, message: '请填写人员信息', trigger: 'blur' }
+ { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
],
minSimilarity: [
{ required: true, message: '请填写最小相似度', trigger: 'blur' }
],
timeRange: [
- { required: true, message: '请填写日期', trigger: 'blur' }
+ { required: true, message: '请填写日期', trigger: 'change' }
]
}
}
},
watch: {
- timeRange(val) {
+ 'listQuery.timeRange'(val) {
if (val && val.length > 0) {
this.listQuery.startTime = val[0]
this.listQuery.endTime = val[1]
- } else {
- this.listQuery.startTime = ''
- this.listQuery.endTime = ''
}
}
},
@@ -219,6 +212,7 @@
this.personNameList.map(item => {
if (item.personName === this.listQuery.personName) {
this.listQuery.facePicUrl = item.personPicture
+ this.listQuery.gender = item.gender
return
}
})
@@ -247,17 +241,28 @@
this.selectLoading = false
})
},
- // 搜索请求发起
+ // 搜索请求发起
fetchData() {
+ const loading = this.$loading({
+ lock: true,
+ text: 'Loading',
+ spinner: 'el-icon-loading',
+ background: 'rgba(0, 0, 0, 0.7)'
+ })
hikPic(this.listQuery).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 = ''
@@ -266,7 +271,7 @@
this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
this.listQuery.endTime = getDate(0, 'SECOND')
this.listQuery.minSimilarity = ''
- this.timeRange = [getDate(0, 'DATE') + ' 00:00:00', getDate(0, 'SECOND')]
+ this.listQuery.timeRange = [getDate(0, 'DATE') + ' 00:00:00', getDate(0, 'SECOND')]
},
// 轨迹上墙
onwall() {
@@ -280,30 +285,21 @@
}
repostSocket(params).then(response => {
if (response.code === 200) {
+ console.log(response)
}
})
},
// 搜索
search() {
- if (this.listQuery.minSimilarity >= 1 && this.listQuery.minSimilarity <= 100) {
- this.fetchData()
- } else {
- this.$message.warning('相似度只能填1-100区间!')
- }
+ this.$refs.ruleForm.validate((valid) => {
+ if (valid) {
+ this.fetchData()
+ } else {
+ this.$message.warning('请按要求填写查询条件!')
+ return
+ }
+ })
console.log(this.listQuery)
- // 取消校验
- // if (this.listQuery.personName === '') {
- // this.$message.warning('请输入人员姓名!')
- // return
- // }
- // this.$refs.form.validate((valid) => {
- // if (valid) {
- // this.fetchData()
- // } else {
- // this.$message.warning('请检查输入信息!')
- // }
- // })
-
}
}
}
@@ -400,7 +396,8 @@
background: #40C3F1;
}
.list-wrap{
- width:100%;
+ // width:100%;
+ width:900px;
height: calc(100% - 175px); // 去除头部区域
overflow-y: auto;
.main{
@@ -425,9 +422,9 @@
height: 240px;
background-image: url("../../assets/global_images/monitor.png");
background-repeat: no-repeat;
- // background-size: cover;
- background-size: 100% 100%;
- margin-left: 20px;
+ background-size: cover;
+ // background-size: 100% 100%;
+ // margin-left: 20px;
z-index: 10;
.img-wrap{
position: absolute;
@@ -439,7 +436,7 @@
z-index: -1;
}
.title{
- width:200px;
+ width:150px;
position: absolute;
left:42%;
top: 40px;
@@ -447,7 +444,7 @@
color:#40C3F1;
}
.desc{
- width:300px;
+ width:150px;
position: absolute;
left:42%;
top: 75px;
@@ -572,14 +569,21 @@
}
.list-wrap .main .list-item .img-wrap{
position: absolute;
- left: 30px;
+ left: 32px;
top: 40px;
- width: 190px;
+ // width: 190px;
+ width: 212px;
height: 138px;
overflow: hidden;
z-index: -1;
}
- .list-wrap .main .list-item .date,.list-wrap .main .list-item .ratio{
- left:52% !important;
+ .list-wrap .main .list-item .date{
+ left:77% !important;
+ }
+ .list-wrap .main .list-item .ratio{
+ left:72% !important;
+ }
+ .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+ left:62% !important;
}