<template>
|
<div class="p-histroy">
|
<div class="filter-bar">
|
<el-date-picker
|
size="small"
|
v-model="searchTime"
|
@change="checkTime"
|
type="datetimerange"
|
:picker-options="pickerOptions"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:default-time="['00:00:00','23:59:59']"
|
></el-date-picker>
|
<el-button @click="checkTime" size="small" type="primary" class="btn-search">查 询</el-button>
|
</div>
|
|
<div class="persons">
|
<div class="board">
|
<b>历史追踪人员</b>
|
<span>共 {{personList.length}} 条数据</span>
|
</div>
|
<div class="target-list">
|
<div
|
class="list-item"
|
v-for="item in personList"
|
:key="item.id"
|
:style="item.selected ? 'border-color:#3D68E1': ''"
|
@click="checkTarget(item)"
|
>
|
<!-- <img src alt :style="{backgroundColor:item.color}"/> -->
|
<!-- <img :src="item.humanImg" fit="cover" /> -->
|
<el-image
|
style="width: 70px; height: 70px;border-radius: 50%;"
|
:src="item.humanImg"
|
fit="cover"
|
></el-image>
|
</div>
|
</div>
|
</div>
|
<div class="videos">
|
<div class="video-item" v-for="v in videos" :key="v.id">
|
<video
|
:src="v.videoUrl"
|
controls="controls"
|
width="480px"
|
height="270px"
|
preload="none"
|
:poster="v.videoPoster"
|
></video>
|
<span>{{v.modTime}}</span>
|
|
<div class="image-preview">
|
<el-image
|
src="/images/panoramicView/img-btn.png"
|
:preview-src-list="[v.trackImg]"
|
height="10px"
|
class="td-img"
|
>
|
<div slot="error" class="image-slot">
|
<i class="el-icon-picture-outline"></i>
|
</div>
|
</el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { findTraceResult } from "@/api/panorama"
|
|
export default {
|
name: "histroy",
|
computed: {
|
videos() {
|
if (this.searching) {
|
return this.videoList
|
}
|
|
// return this.videoList.filter(v => v.id == this.selectedID);
|
return this.videoList.filter(v => v.selected);
|
}
|
},
|
data() {
|
return {
|
searchTime: [
|
this.$moment().format("YYYY-MM-DD 00:00:00"),
|
this.$moment().format("YYYY-MM-DD 23:59:59")
|
//this.$moment().format("YYYY-MM-DD HH:mm:ss")
|
],
|
pickerOptions: {
|
shortcuts: [{
|
text: '近一小时',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 60 * 60 * 1000);
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '近三小时',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 60 * 60 * 1000 * 3);
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '近六小时',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 60 * 60 * 1000 * 6);
|
picker.$emit('pick', [start, end])
|
}
|
}]
|
},
|
search: "",
|
personList: [],
|
videoList: [
|
// {
|
// id: "1",
|
// videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
|
// trackImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
|
// }
|
]
|
}
|
},
|
mounted() {
|
this.searchData();
|
},
|
methods: {
|
checkTime() {
|
if (!this.searchTime) {
|
this.$notify({
|
type: 'warning',
|
message: '请选择时间!'
|
});
|
return;
|
}
|
|
this.searchData();
|
},
|
checkTarget(item) {
|
this.searching = false;
|
this.$set(item, 'selected', item.selected != undefined ? !item.selected : true);
|
},
|
searchData() {
|
findTraceResult({ searchTime: this.searchTime }).then(rsp => {
|
this.searching = true;
|
|
this.videoList = this.personList = [];
|
|
if (rsp && rsp.success && rsp.data) {
|
this.videoList = rsp.data;
|
this.personList = [...rsp.data];
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.p-histroy {
|
height: 1080px;
|
background: inherit;
|
background-color: rgba(240, 242, 245, 1);
|
|
.filter-bar {
|
text-align: left;
|
padding: 15px 10px;
|
height: 35px;
|
background-color: #fff;
|
}
|
|
.persons {
|
width: 342px;
|
height: 917px;
|
background-color: #fff;
|
margin: 10px 10px;
|
float: left;
|
overflow: auto;
|
.board {
|
height: 70px;
|
line-height: 50px;
|
text-align: left;
|
padding: 0px 10px;
|
b {
|
font-size: 14px;
|
}
|
span {
|
margin-left: 160px;
|
}
|
}
|
.target-list {
|
display: flex;
|
flex-wrap: wrap;
|
// justify-content: space-between;
|
width: 335px;
|
overflow: auto;
|
height: auto;
|
.list-item {
|
width: 70px;
|
height: 70px;
|
/* margin-bottom: 10px; */
|
margin: 5px 4px;
|
border: 2px solid #dedede;
|
border-radius: 50%;
|
cursor: pointer;
|
img {
|
width: 100%;
|
height: 100%;
|
display: block;
|
border-radius: 50%;
|
border: 0px;
|
}
|
&.deact {
|
opacity: 0.5;
|
background: rgba(0, 0, 0, 0.3);
|
}
|
}
|
}
|
}
|
|
.videos {
|
// width: 80%;
|
margin: 0px 10px;
|
height: 85%;
|
display: flex;
|
flex-wrap: wrap;
|
overflow: auto;
|
.video-item {
|
width: 500px;
|
height: 320px;
|
margin-left: 10px;
|
margin-top: 10px;
|
background-color: #fff;
|
|
span {
|
display: inline-block;
|
float: left;
|
margin-left: 10px;
|
}
|
|
video {
|
margin: 10px;
|
}
|
|
.image-preview {
|
width: 25px;
|
float: right;
|
margin: -5px 10px;
|
cursor: pointer;
|
|
.el-image-viewer__close {
|
color: #fff;
|
}
|
|
.td-img {
|
color: #fff;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
