From 08897690839edae6546d56661c95d78629f70ecb Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期五, 21 五月 2021 14:04:59 +0800
Subject: [PATCH] 修复全景跟踪bug
---
src/pages/panoramicView/components/LabelMark.vue | 5
src/pages/panoramicView/index/App.vue | 19 ++-
src/pages/panoramicView/components/RelateCamera.vue | 58 +++++----
src/pages/panoramicView/components/SlideCanvas.vue | 24 ++--
src/pages/panoramicView/components/History.vue | 241 ++++++++++++++++++++++++++++++++++++++++
src/pages/panoramicView/components/TracePlot.vue | 9
6 files changed, 302 insertions(+), 54 deletions(-)
diff --git a/src/pages/panoramicView/components/History.vue b/src/pages/panoramicView/components/History.vue
new file mode 100644
index 0000000..00d4f02
--- /dev/null
+++ b/src/pages/panoramicView/components/History.vue
@@ -0,0 +1,241 @@
+<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>鍏� 10 鏉℃暟鎹�</span>
+ </div>
+ <div class="target-list">
+ <div
+ class="list-item"
+ v-for="item in personList"
+ :key="item.id"
+ :style="selectedID == item.id ? 'border-color:#3D68E1': ''"
+ @click="checkTarget(item)"
+ >
+ <!-- <img src alt :style="{backgroundColor:item.color}"/> -->
+ <img :src="'/httpImage/' + item.picSmUrl" />
+ </div>
+ </div>
+ </div>
+ <div class="videos">
+ <div class="video-item" v-for="v in videoList" :key="v.name">
+ <video :src="'/httpImage/' + v.videoUrl" controls="controls" width="480px" height="270px"></video>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "histroy",
+ 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])
+ }
+ }]
+ },
+ selectedID: "",
+ personList: [
+ {
+ id: "0",
+ picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
+ },
+ {
+ id: "1",
+ picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
+ },
+ {
+ id: "2",
+ picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
+ },
+ {
+ id: "3",
+ picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
+ },
+ {
+ id: "4",
+ picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
+ },
+ {
+ id: "5",
+ picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
+ },
+ {
+ id: "6",
+ picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
+ },
+ ],
+ videoList: [
+ {
+ name: "1",
+ videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
+ pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
+ },
+ {
+ name: "2",
+ videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
+ pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
+ },
+ {
+ name: "3",
+ videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
+ pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
+ },
+ {
+ name: "4",
+ videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
+ pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
+ },
+ ]
+ }
+ },
+ methods: {
+ checkTime() {
+ if (!this.searchTime) {
+ this.$notify({
+ type: 'warning',
+ message: '璇烽�夋嫨鏃堕棿!'
+ });
+ return;
+ }
+ clearInterval(this.timer);
+ //鍒ゆ柇鏄惁鏄煡鍘嗗彶鏁版嵁
+ if (Date.parse(this.searchTime[1]) < Date.now()) {
+ this.filterData()
+ } else {
+ this.activeObjHashMap = {};
+ //瀹炴椂鏌�
+ this.searchData();
+ }
+
+ },
+ checkTarget(item) {
+ this.selectedID = item.id;
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+.p-histroy {
+ height: 800px;
+ background: inherit;
+ background-color: rgba(240, 242, 245, 1);
+
+ .filter-bar {
+ text-align: left;
+ padding: 15px 10px;
+ height: 35px;
+ background-color: #fff;
+ }
+
+ .persons {
+ width: 18%;
+ height: 670px;
+ background-color: #fff;
+ margin: 10px 10px;
+ float: left;
+ .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: 375px;
+ 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%;
+ }
+ &.deact {
+ opacity: 0.5;
+ background: rgba(0, 0, 0, 0.3);
+ }
+ }
+ }
+ }
+
+ .videos {
+ width: 80%;
+ margin: 10px 10px;
+ height: 88%;
+ display: flex;
+ flex-wrap: wrap;
+ .video-item {
+ width: 500px;
+ height: 320px;
+ margin-left: 10px;
+ background-color: #fff;
+
+ video {
+ margin: 10px;
+ }
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/panoramicView/components/LabelMark.vue b/src/pages/panoramicView/components/LabelMark.vue
index 3c63488..6686a05 100644
--- a/src/pages/panoramicView/components/LabelMark.vue
+++ b/src/pages/panoramicView/components/LabelMark.vue
@@ -319,7 +319,6 @@
sure() {
let _this = this;
this.$refs['labelForm'].validate(valid => {
- console.log(valid)
if (valid) {
_this.isShowPop = false;
//缂栬緫纭畾
@@ -328,7 +327,6 @@
_this.curCameraData.coords[editedIndex] = JSON.parse(JSON.stringify(_this.curLabel));
}
- console.log(_this.curCameraData.coords)
this.$refs['labelForm'].clearValidate();
}
});
@@ -394,7 +392,6 @@
})
},
showCurPos(e) {
- console.log(e);
this.isShowCurPos = true;
this.traceX = e.offsetX;
this.traceY = e.offsetY;
@@ -424,10 +421,8 @@
this.newLabel(e);
},
newLabel(e) {
- console.log('鐐瑰嚮浜嗙敾鏉�')
if (this.isShowPop) return;
//鑾峰彇榧犳爣鐩稿浜庣敾鏉跨殑瀹氫綅
- console.log('鑾峰彇褰撳墠瀹氫綅淇℃伅');
this.$refs['labelForm'].resetFields();
let target = {
id: '',
diff --git a/src/pages/panoramicView/components/RelateCamera.vue b/src/pages/panoramicView/components/RelateCamera.vue
index 8b846d3..8933b5a 100644
--- a/src/pages/panoramicView/components/RelateCamera.vue
+++ b/src/pages/panoramicView/components/RelateCamera.vue
@@ -40,6 +40,7 @@
</div>
</div>
<!-- <div class="part" v-if="groupList.length"> -->
+ <el-divider></el-divider>
<div class="part" v-if="groupList.length!==0 && Object.keys(curGroup)">
<div class="title">缁樺埗鍖哄煙(鐢ㄤ簬绠楁硶鍒嗘瀽)</div>
<div class="relative-partment" v-if="curGroup.cameras&&curGroup.cameras.length">
@@ -48,6 +49,7 @@
</div>
</div>
</div>
+ <el-divider></el-divider>
<div class="part relative-config" v-if="Object.keys(curGroup)">
<div class="title">
<div class="left">
@@ -142,7 +144,7 @@
export default {
components: { SlideCanvas },
- data () {
+ data() {
return {
cameraData: [],
relativeList: [],
@@ -161,11 +163,11 @@
cameraAndPolygonData: []
}
},
- mounted () {
+ mounted() {
this.getAllCameraData();
},
methods: {
- getAllCameraData () {
+ getAllCameraData() {
let _this = this;
getCamerasByServer().then(res => {
if (res.success) {
@@ -176,10 +178,10 @@
console.log(e)
})
},
- polygonUpdate () {
+ polygonUpdate() {
this.getAllGroups();
},
- delRelation (item, index) {
+ delRelation(item, index) {
let _this = this;
if (item.id) {
delRelation(item.id).then(res => {
@@ -191,12 +193,12 @@
_this.findRelationByGroup();
}
})
- }else{
- this.relativeList.splice(index,1);
+ } else {
+ this.relativeList.splice(index, 1);
}
},
- findRelationByGroup () {
+ findRelationByGroup() {
let _this = this;
findByGroup({ groupId: this.curGroup.id }).then(res => {
@@ -213,7 +215,7 @@
})
})
},
- saveRelativePolygon (item) {
+ saveRelativePolygon(item) {
// debugger
if (!item.sourceObj || !item.targetObj) {
this.$notify({
@@ -250,17 +252,21 @@
})
},
- async findPolygonByIds (cameras) {
+ async findPolygonByIds(cameras) {
for (var i = 0; i < cameras.length; i++) {
+ if (Object.keys(cameras[i]).length == 0)
+ continue
let res = await getAllPolygon({ cameraId: cameras[i].id });
cameras[i].canvasData = res.data;
}
return cameras
},
- async getAllGroupInfo () {
+ async getAllGroupInfo() {
let _this = this;
+ console.log("_this.cameraData", _this.cameraData)
let res = await findCameraGroups();
+ console.log("res", res);
let groupArr = res.data.map(item => {
let obj = {}; //group
obj.groupName = item.groupName;
@@ -303,9 +309,10 @@
// _this.checkCurrentGroup(_this.groupList[0]);
// })
// },
- async getAllGroups () {
+ async getAllGroups() {
let _this = this;
let groups = await this.getAllGroupInfo();
+ console.log("groups", groups)
for (var i = 0; i < groups.length; i++) {
groups[i].cameras = await _this.findPolygonByIds(groups[i].cameras)
}
@@ -316,36 +323,36 @@
this.groupList.length && this.checkCurrentGroup(_this.groupList[0]);
} else {
let group = this.groupList.find(one => one.id == this.groupForm.id);
- if(group){
+ if (group) {
this.groupList.length && this.checkCurrentGroup(group);
- }else{
+ } else {
this.groupList.length && this.checkCurrentGroup(_this.groupList[0]);
}
-
+
}
},
- addRelation () {
+ addRelation() {
let obj = { cameraArea1: '', cameraArea2: '' };
this.relativeList.push(obj)
},
- editGroup (group) {
+ editGroup(group) {
// debugger
this.groupModelVisible = true;
//this.$refs['groupForm'].resetFields();
//this.groupForm = group;
this.groupForm = JSON.parse(JSON.stringify(group));
},
- removeGroup (group) {
+ removeGroup(group) {
let _this = this;
delCameraGroup(group.id).then(res => {
_this.getAllGroups()
})
},
- checkCurrentGroup (group) {
+ checkCurrentGroup(group) {
this.groupList.forEach(group => {
group.checked = false;
});
@@ -375,10 +382,9 @@
tempArr = tempArr.concat(cameraArea)
});
this.cameraAreas = tempArr;
- console.log(this.cameraAreas)
})
},
- confirmGroupDialog () {
+ confirmGroupDialog() {
//璇锋眰淇濆瓨鏂板缓鎴栫紪杈戝垎缁�
let _this = this;
let params = {
@@ -413,7 +419,7 @@
})
//this.groupList.push(this.groupForm);
saveCameraGroupInfo(params).then(res => {
- if(res.success){
+ if (res.success) {
this.$notify({
type: 'success',
message: '淇濆瓨鎴愬姛!'
@@ -424,7 +430,7 @@
this.groupModelVisible = false;
},
- newGroup () {
+ newGroup() {
this.groupModelVisible = true;
this.$nextTick(() => {
this.$refs['groupForm'].resetFields();
@@ -509,7 +515,7 @@
position: relative;
display: flex;
&:after {
- content: '';
+ content: "";
position: absolute;
font-size: 0;
width: 1px;
@@ -531,7 +537,7 @@
margin-bottom: 20px;
.relative-partment {
width: 1200px;
- margin: 0 auto;
+ // margin: 0 auto;
display: flex;
justify-content: space-between;
.area-wrap {
@@ -561,7 +567,7 @@
.right {
display: flex;
align-items: center;
- .el-button + .el-button{
+ .el-button + .el-button {
margin-left: 0;
}
}
diff --git a/src/pages/panoramicView/components/SlideCanvas.vue b/src/pages/panoramicView/components/SlideCanvas.vue
index f8367e9..02bfbcb 100644
--- a/src/pages/panoramicView/components/SlideCanvas.vue
+++ b/src/pages/panoramicView/components/SlideCanvas.vue
@@ -59,39 +59,39 @@
],
watch: {
cameras: {
- handler (n, o) {
+ handler(n, o) {
console.log('slidecanvas cameras', n)
},
deep: true
}
},
components: { PolygonCanvas },
- data () {
+ data() {
return {
swiperOption: this.newOption(),
//mySwiper: {}
}
},
computed: {
- swiper () {
+ swiper() {
return this.$refs['cameraSwiper'].swiper
}
},
- mounted () {
+ mounted() {
//this.mySwiper = this.$refs.sceneSwiper.swiper;
- console.log(this.swiper)
+ // console.log(this.swiper)
},
methods: {
- refresh (url, cameraId) {
+ refresh(url, cameraId) {
this.$emit('polygonDataUpdate')
},
- getCanvasData (data) {
+ getCanvasData(data) {
let _this = this;
savePolygon(data).then(rsp => {
_this.$emit('polygonDataUpdate')
});
},
- newOption () {
+ newOption() {
return {
slidesPerView: 1,
spaceBetween: 0,
@@ -104,21 +104,21 @@
}
},
- pre () {
+ pre() {
this.swiper.activeIndex--;
if (this.swiper.activeIndex == -1) {
this.swiper.activeIndex = this.cameras.length - 1;
}
this.swiper.slideTo(this.swiper.activeIndex);
},
- next () {
+ next() {
this.swiper.activeIndex++;
if (this.swiper.activeIndex == this.cameras.length) {
this.swiper.activeIndex = 0;
}
this.swiper.slideTo(this.swiper.activeIndex);
},
- drawBaseImg (id) {
+ drawBaseImg(id) {
this.$refs[`polygonCanvas_${id}`][0].showModal();
}
}
@@ -181,7 +181,7 @@
b {
font-size: 14px;
}
- .left-fixed{
+ .left-fixed {
position: absolute;
left: 0;
top: -6px;
diff --git a/src/pages/panoramicView/components/TracePlot.vue b/src/pages/panoramicView/components/TracePlot.vue
index 1c91063..b17498b 100644
--- a/src/pages/panoramicView/components/TracePlot.vue
+++ b/src/pages/panoramicView/components/TracePlot.vue
@@ -29,6 +29,7 @@
@click="checkTarget(item)"
>
<!-- <img src alt :style="{backgroundColor:item.color}"/> -->
+ <img :src="'/httpImage/'+item.picSmUrl" />
</div>
</div>
</div>
@@ -113,7 +114,6 @@
},
beforeDestroy() {
- console.log('beforeDestroy')
clearInterval(this.timer);
},
methods: {
@@ -224,7 +224,6 @@
})
},
drawTracePath() {
- console.log(this.actObjs)
let canvas = this.$refs['trackArea'];
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -341,13 +340,15 @@
_this.actObjs[i].color = _this.colorArr[i % 10];
this.$set(_this.actObjs[i], 'isHide', _this.actObjs[i].isHide);
}
- console.log(new Date(), _this.actObjs);
+ console.log(_this.actObjs)
_this.drawTracePath();
_this.timeMark = new Date();
_this.timer = setTimeout(() => {
_this.searchData()
}, _this.intervalTime)
+
+
})
}
}
@@ -358,7 +359,7 @@
.trace-plot {
.filter-bar {
width: 960px;
- margin: 20px auto;
+ margin: 20px 10px;
display: flex;
align-items: center;
flex-direction: end;
diff --git a/src/pages/panoramicView/index/App.vue b/src/pages/panoramicView/index/App.vue
index d641446..8291124 100644
--- a/src/pages/panoramicView/index/App.vue
+++ b/src/pages/panoramicView/index/App.vue
@@ -11,12 +11,16 @@
mode="horizontal"
@select="checkMenu"
>
+ <el-menu-item index="0">鍘嗗彶璁板綍鏌ヨ</el-menu-item>
<el-menu-item index="1">浣嶇疆鏍囧畾</el-menu-item>
<el-menu-item index="2">杞ㄨ抗鍥�</el-menu-item>
<el-menu-item index="3">鍏宠仈鎽勫儚鏈�</el-menu-item>
</el-menu>
</div>
<div class="act-view">
+ <template v-if="actMenuIndex=='0'">
+ <History />
+ </template>
<template v-if="actMenuIndex=='1'">
<label-mark></label-mark>
</template>
@@ -34,15 +38,16 @@
import LabelMark from '../components/LabelMark';
import TracePlot from '../components/TracePlot';
import RelateCamera from '../components/RelateCamera';
+import History from '../components/History';
export default {
- components: { LabelMark, TracePlot, RelateCamera },
- data () {
+ components: { LabelMark, TracePlot, RelateCamera, History },
+ data() {
return {
- actMenuIndex: '1',
+ actMenuIndex: '0',
}
},
methods: {
- checkMenu (key, keyPath) {
+ checkMenu(key, keyPath) {
this.actMenuIndex = key;
}
}
@@ -61,10 +66,10 @@
width: 310px;
display: flex;
align-items: center;
- .icon{
+ .icon {
width: 50px;
}
- .title{
+ .title {
text-decoration: none;
margin-left: 10px;
font-size: 17px;
@@ -79,7 +84,7 @@
.el-menu--horizontal > .el-menu-item {
border-bottom: 0;
color: #fff;
- &:hover{
+ &:hover {
color: #fff;
background: rgb(24, 35, 182);
}
--
Gitblit v1.8.0