diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue index ac7a350..39eb7c0 100644 --- a/src/views/popup/board.vue +++ b/src/views/popup/board.vue @@ -3,7 +3,7 @@
巡视人员轨迹处理
- + @@ -33,7 +33,7 @@ - - + - + 查询 @@ -82,13 +81,13 @@
{{ child.positionName ? child.positionName : '' }}
-
+
{{ child.devName ? child.devName : '' }}
-
+
{{ 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; }